使用el-upload手动上传多个文件
引入组件el-upload
<el-upload style=""
class="upload-demo"
ref="upload"
:limit="fileLimit"
drag
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:before-upload="beforeUpload"
:on-change="handleChange"
:auto-upload="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">最多{{this.fileLimit}}个附件，每个附件不超过{{this.fileSizeLimitByMb}}MB</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
注意el-upload中有许多的钩子函数，比如before-remove，在移除文件前会触发。
Axios通过post发送多个文件
首先我们需要找到这些文件，我定义了一个Map，记录<文件名，文件>。
在handleChange钩子函数中，把文件加入该map，因为这个钩子被触发时表示有新的文件加入：
handleChange(file, fileList) {
console.log("handleChange", file, fileList)
// 添加文件时触发:file.raw才是原始文件类型
this.fileMap.set(file.name, file.raw);
}
handleRemove是处理移除文件的，如果被调用，表明文件被移除，也应该从Map中移除。
handleRemove(file, fileList) {
this.fileMap.delete(file.name)
}
那么我们就通过一个Map记录下了所有的文件，现在如何上传？
我们知道，在HTTP请求报文中，formdata是一种专门传输文件的Content-Type，那么我们就创建一个FormData对象，把文件存进去，然后传输即可。
let fileFormData = new FormData(); // 这是需要发送的文件formdata
for (let val of this.fileMap.values()){
fileFormData.append("file", val);
}
注意：这里这里所有的文件都添加到"file"这个名称下，那么就会自动形成一个文件数组。
除此之外，我们还可以添加其他参数，如：
fileFormData.append("subject", this.emailForm.subject);
fileFormData.append("content", this.emailForm.content);
后端如何接收文件？
我使用的是Spring框架，后端MultipartFile类型专用来接收文件。如：
@PostMapping(value = "/send")
public Response send(@RequestParam("emails") String emails,
@RequestParam("subject") String subject,
@RequestParam("content") String content,
@RequestParam("file") MultipartFile[] multipartFiles){
System.out.println(emails+" | "+subject+" | "+content);
System.out.println("multipartFiles:"+ multipartFiles.length);
for (MultipartFile file : multipartFiles) {
System.out.println(file.getOriginalFilename());
}
return emailService.send();
}