最近在做项目的时候有一个需求，需要导入word文档，并且需要支持多选。element-ui 的 upload 组件支持多选文件，只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传，于是就会存在多次的上传请求，由于后台的接口要求是一次请求能够上传多个文件，且我们也知道请求多了会对服务器造成更大的压力，因而基于多种原因，这个 upload 的上传行为得进行改造一番。
先来看下改造前后的结果
改造前的结果：同时上传2个文件，会发出2次对接口的请求，每次请求里包含了一个文件。
upload_result_before
改造后的结果：同时上传2个文件，会发出一次接口请求，接口入参里包含2个文件。
upload_result_after
方法一：通过配置file-list（推荐使用）
html部分：
<el-upload action="/api/editEviCard.jhtml" accept="image/*" multiple :file-list="fileList"
:on-change="fileChange" :on-remove="fileRemove" :auto-upload="false" style="display: inline-block;">
<el-button type="primary" plain><i class="el-icon-upload el-icon--right"></i>点击选择身份证明文件（正反面两张，多选）</el-button>
<div slot="tip">只能上传图片格式文件</div>
</el-upload>
<el-button style="margin-left: 10px;vertical-align: top;" type="success" plain @click="submitUpload">确认上传
</el-button>
js部分：
//检测文件变动获取文件
fileChange(file, fileList) {
this.fileList = fileList;
}
//检测文件删除
fileRemove(file, fileList) {
this.fileList = fileList;
}
//手动模拟提交上传
submitUpload() {
console.log("this.fileList", this.fileList)
// this.$refs.upload.submit();
let formData = new FormData(); // 用FormData存放上传文件
this.fileList.forEach(file => {
formData.append('file', file.raw)
})
// 调用上传接口
editEviCard(formData).then((res) => {
//手动上传无法触发成功或失败的钩子函数，因此这里手动调用
this.upSuccess(res)
}, (err) => {
this.upError(err)
})
}
upSuccess(res) { //上传成功
if (res.data.state === 100) {
Message.success({
message: "文件上传成功！"
})
} else {
Message.error({
message: "文件上传失败！"
})
}
}
upError(err) { //上传失败
Message.error({
message: "文件上传失败！"
})
}
关键代码说明：
-
auto-upload设置为false用于关闭组件的自动上传； -
file-list配置一个数组用于接收上传的文件列表； -
multiple设置为true表示支持多选文件； -
action配置为完整的上传接口url，不配置会报错 - 不用配置
data、on-success、on-error等参数，因为手动上传不会用到这些配置信息； - 最后通过点击按钮手动调用上传函数
submitUpload，创建一个FormData把fileList的文件存进去。
方法二：通过配置http-request
html部分：
<el-upload
class="upload-demo list-uploadbtn"
ref="upload"
:action="curBastUrl"
:auto-upload="false"
:http-request="uploadFile"
:on-remove="updataRemove"
:before-upload="beforeUpload"
:on-change="updatachange"
:multiple="true">
<el-button size="small">点击上传</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">确 定</el-button>
js部分：
submitUpload() { // 导入
let tempData = this.filedata
this.filedata = new FormData() // 用FormData存放上传文件
this.$refs.upload.submit() // 会循环调用uploadFile方法，多个文件调用多次
this.filedata.append('categoryDirectory', tempData.categoryDirectory)
// importCase是上传接口
importCase(this.filedata).then((res) => {
//手动上传无法触发成功或失败的钩子函数，因此这里手动调用
this.updataSuccess(res.data)
}, (err) => {
})
}
uploadFile(file) {
this.filedata.append('file', file.file)
}
关键代码说明：
-
http-request自定义上传方法； - 最后通过点击按钮手动调用上传函数
submitUpload，创建一个FormData, 调用upload组件的submit方法的时候会循环调用http-request配置的方法，从而往FormData里存放文件。
