Springboot+Vue实现多文件上传-526互联

多文件上传，后端接收到多次请求
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 "多文件上传成功";
}