[英]Angular HttpClient Post Two Files (Multipart/form-data)
I have a Java Spring Boot controller, which accepts two MultipartFile request parameters. 我有一个Java Spring Boot控制器,它接受两个MultipartFile请求参数。 I've tested this endpoint via Swagger and Postman and it works.
我已经通过Swagger和Postman测试了此端点,并且可以正常工作。 See interface below:
请参阅下面的界面:
@RequestMapping(value = "/start/", method = RequestMethod.POST)
ResponseEntity<String> startSim(@RequestParam("scenario") MultipartFile scenarioFile, @RequestParam MultipartFile probabilityFile);
In Angular, I have added code to select/upload the files individually, which I store in my app.component.ts file as private variables named configFile and parameterFile, like so: 在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);
}
How can I use the post method to send both files? 如何使用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));
}
I've tried sending the request using both FormData and HttpParams. 我尝试使用FormData和HttpParams发送请求。
Update 更新资料
I was able to use the form data option after I updated my rest controller to take a MultipartFile[]: 更新休息控制器以使用MultipartFile []后,我可以使用表格数据选项:
ResponseEntity<String> startSim(@RequestParam("configList") MultipartFile[] configList);
I also got rid of the HttpOptions and let the content-type be set automatically: 我还摆脱了HttpOptions并自动设置了内容类型:
// Removed
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'multipart/form-data'
})
};
You can send multiple files with these methods: 您可以使用以下方法发送多个文件:
1.) JSON.stringify 1.)JSON.stringify
const list = [
{ scenarioFile: this.configFile },
{ probabilityFile: this.parameterFile }
];
const formData = new FormData();
formData.append("configList", JSON.stringify(list));
2.) or append it with the same formData key 2.)或附加相同的formData键
Reference: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
参考: https : //developer.mozilla.org/zh-CN/docs/Web/API/FormData/append
As with regular form data, you can append multiple values with the same name
与常规表单数据一样,您可以附加多个具有相同名称的值
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
Then you can continue with your http post call: 然后,您可以继续进行http帖子通话:
this.http
.post(this.startURL, formData, httpOptions)
.subscribe(json => console.log(json));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.