我有一个Java Spring Boot控制器,它接受两个MultipartFile请求参数。我已经通过Swagger和Postman测试了此端点,并且可以正常工作。参见下面的界面:
@RequestMapping(value = "/start/", method = RequestMethod.POST)
ResponseEntity<String> startSim(@RequestParam("scenario") MultipartFile scenarioFile, @RequestParam MultipartFile probabilityFile);
在Angular中,我添加了代码来分别选择/上载文件,这些文件作为名为configFile和parameterFile的私有变量存储在我的app.component.ts文件中,如下所示:
uploadConfigFile(e) {
const reader = new FileReader();
const file = e.target.files[0];
this.configFile = file;
// reader.onload = () => {
// this.configFile = reader.result;
// };
// reader.readAsBinaryString(file);
}
uploadParameterFile(e) {
const reader = new FileReader();
const file = e.target.files[0];
this.parameterFile = file;
// reader.onload = () => {
// this.parameterFile = reader.result;
// };
// reader.readAsBinaryString(file);
}
如何使用post方法发送两个文件?
startSim(e) {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'multipart/form-data'
})
};
console.log(this.configFile);
console.log(this.parameterFile);
// const formData = new FormData();
// formData.append('scenarioFile', this.configFile);
// formData.append('probabilityFile', this.parameterFile);
//
// console.log(formData);
const params = new HttpParams();
params.append('scenarioFile', this.configFile);
params.append('probabilityFile', this.parameterFile);
const result = this.http.post(this.startURL, params, httpOptions);
result.subscribe(json => console.log(json));
}
我尝试使用FormData和HttpParams发送请求。
更新
更新休息控制器以获取MultipartFile []后,我可以使用表格数据选项:
ResponseEntity<String> startSim(@RequestParam("configList") MultipartFile[] configList);
我还摆脱了HttpOptions并自动设置了内容类型:
// Removed
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'multipart/form-data'
})
};
答案 0 :(得分:0)
您可以使用以下方法发送多个文件:
1。)JSON.stringify
const list = [
{ scenarioFile: this.configFile },
{ probabilityFile: this.parameterFile }
];
const formData = new FormData();
formData.append("configList", JSON.stringify(list));
2。)或附加相同的formData键
参考:https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
与常规表单数据一样,您可以附加多个具有相同名称的值
const formData = new FormData();
formData.append('configList', this.configFile);
formData.append('configList', this.parameterFile);
console.log(formData.getAll('configList')); // Shows the content of configFile and parameterFile
然后,您可以继续进行http帖子通话:
this.http
.post(this.startURL, formData, httpOptions)
.subscribe(json => console.log(json));