Springboot+Vue实现多文件上传

多文件上传，后端接收到多次请求
vue实现

<el-upload
class="upload-demo"
action="http://10.240.46.88:8081/upload1"
:on-preview="handlePreview"
:on-remove="handleRemove"
:multiple="multiple"
:limit="3"
:on-exceed="handleExceed"
:on-success="sucess"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
springboot后台

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
System.out.println("上传文件方法触发了");
//判断非空
if (file.isEmpty()) {
return "上传的文件不能为空";
}
try {
// 测试MultipartFile接口的各个方法
// logger.info("[文件类型ContentType] - [{}]",file.getContentType());
// logger.info("[文件组件名称Name] - [{}]",file.getName());
// logger.info("[文件原名称OriginalFileName] - [{}]",file.getOriginalFilename());
// logger.info("[文件大小] - [{}]",file.getSize());
// logger.info(this.getClass().getName()+"图片路径："+path);
String path = "/Users/lijianxi/projects/javaproject/springlearn/src/main/resources/";
File f = new File(path);
// 如果不存在该路径就创建
if (!f.exists()) {
f.mkdir();
}
File dir = new File(path + file.getOriginalFilename());
// 文件写入
file.transferTo(dir);
return "上传单个文件成功";
} catch (Exception e) {
e.printStackTrace();
return "上传单个文件失败";
}
}

2.多文件上传，后端接收到一次请求

vue实现

<el-upload
class="upload-demo"
ref="upload"
action="http://10.240.46.88:8081/upload2"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:http-request="uploadFile"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
springboot后台

@PostMapping("/upload2")
public String upload2(@RequestParam("file")MultipartFile[] file){
System.out.println("-----22222--"+file.length);
String path = "/Users/lijianxi/projects/javaproject/springlearn/src/main/resources/";
if(file!=null&file.length>0) {
for (MultipartFile multipartFile : file) {
String fileName = multipartFile.getOriginalFilename();
File file1 = new File(path + fileName);
try {
multipartFile.transferTo(file1);
} catch (IOException e) {
e.printStackTrace();
return "上传失败";
}
System.out.println("");
}
}
System.out.println("上传成功");
return "多文件上传成功";
}

多文件上传时，默认的vue组件会将文件进行多次请求后端，为了可以实现一次请求，需要手动改造代码

html部分

修改:auto-upload="false"属性为false，阻止组件的自动上传
:http-request="uploadFile"覆盖上传事件
@click="submitUpload"，给上传按钮绑定事件
js部分

在data中设置一个变量fileData
在方法中设置FormData的格式
通过ajax发送请求，携带参数为fileData

上传过程中报错：

TypeError: 'append' called on an object that does not implement interface FormData.
解决方法：

//报错请加入以下三行，则ajax提交无问题
cache: false,
processData: false,
contentType: false,

参考文章：http://blog.ncmem.com/wordpress/2023/12/11/springbootvue%e5%ae%9e%e7%8e%b0%e5%a4%9a%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论