elementui中同时上传多个文件_2019-12-19 element-ui文件上传 一次请求上传多个文件...

最近在做项目的时候有一个需求，需要导入word文档，并且需要支持多选。element-ui 的 upload 组件支持多选文件，只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传，于是就会存在多次的上传请求，由于后台的接口要求是一次请求能够上传多个文件，且我们也知道请求多了会对服务器造成更大的压力，因而基于多种原因，这个 upload 的上传行为得进行改造一番。

先来看下改造前后的结果

改造前的结果：同时上传2个文件，会发出2次对接口的请求，每次请求里包含了一个文件。

upload_result_before

改造后的结果：同时上传2个文件，会发出一次接口请求，接口入参里包含2个文件。

upload_result_after

方法一：通过配置file-list(推荐使用)

html部分：

:on-change="fileChange" :on-remove="fileRemove" :auto-upload="false" style="display: inline-block;">

点击选择身份证明文件(正反面两张，多选)

确认上传

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部分：

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">

点击上传

确 定

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 里存放文件。