后台使用spring boot,前端想异步方式上传多个文件?
后台使用:
@PostMapping(value = "/fileUpload")
public ResponseEntity fileUpload(@RequestParam("files") MultipartFile[] file) {
...
}
前端针对不同情况而使用不同方式,主要使用表单异步提交方式,如下:
若只是在单个文件域中选择多个文件上传,则加上属性:multiple即可,这样既可以选择多个文件上传,如下:
HTML
<input id="file1" type="file" multiple />
js代码
submit() {
let formData = new FormData();
let files = document.getElementById("file1").files;
if (files) {
files .forEach(f => {
formData.append("files", f);
})
}
// 以formData为参数发送请求,contentType需要设置为"multipart/form-data"
...
}
若使用多个文本域,想发到一起上传,也好办:
HTML
<input id="file1" type="file"/>
<input id="file2" type="file"/>
<input id="file3" type="file"/>
<input id="file4" type="file"/>
...
js代码
submit() {
let formData = new FormData();
let files = document.querySelectorAll("input");
if (files) {
files.forEach(f => {
if (f.files && 0 < f.files.length) {
formData.append("files", f.files[0]);
}
})
}
// 以formData为参数发送请求,contentType需要设置为"multipart/form-data"
...
}
总结,实际上前端想要上传多个文件,文件域的名称一样就行。