我有一个基于spring的端点:
@PostMapping("/new")
public ResponseEntity house(@RequestBody Map<String ,Object> data) {
data.values().forEach(System.out::println);
return ResponseHub.defaultFound("");
}
我只想发送一个文件和一些数据。我用离子和角离子,所以在角离子中我有:
let map = new TSMap();
map.set('field1', 'wan');
map.set('field2', 'two');
this.files = event.target.files;
map.set('files', this.files);
let data = map.toJSON();
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
let url = "http://localhost:8080/api/data";
this.http.post<HttpResponse>(url, data, httpOptions).pipe().toPromise().then(response=>{
console.log(response);
});
遗憾的是,我在后端得到的输出只是
wan
two
{0={}}
我知道这是因为我的内容类型设置为 application/json
在http请求中,我对angular进行了访问。我到处寻找,我找到了一个解决方案,但允许上传一个文件,我将无法添加任何其他数据连同它。最好的解决办法是什么?
编辑:调用包含Angular 代码的函数的html:
<ion-item>
<ion-label id="profile_image" stacked>Select File</ion-label>
<ion-input type="file" accept=".png, .jpg" multiple (change)="selectFile($event)">
Select Image
</ion-input>
</ion-item>
这是它获取文件的地方。
建议的解决方法:我尝试使用 FormData
```
selectFile(event) {
let formData = new FormData();
let map = new TSMap();
map.set('field1', 'wan');
map.set('field2', 'two');
let data = map.toJSON();
formData.append('data', JSON.stringify(data));
this.files = event.target.files;
formData.append('files', this.files);
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'multipart/form-data'
})
};
let url = "http://localhost:8080/api/data";
this.http.post(url, formData, httpOptions).pipe().toPromise().then(response=>{
console.log(response);
});
}
后端:
@PostMapping("/data")
public ResponseEntity house(@RequestPart(name = "data") Map<String, Object> data,
@RequestPart(name = "files") MultipartFile[] files) throws IOException {
data.values().forEach(System.out::println);
for (MultipartFile file: files)
System.out.println(file.getInputStream().available());
return ResponseHub.defaultFound("");
}
现在它给了我一个错误:
org.apache.tomcat.util.http.fileupload.fileuploadexception:请求被拒绝,因为找不到多部分边界
暂无答案!
目前还没有任何答案,快来回答吧!