如何做到发送一次请求上传多个文件(使用 el-upload)__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate
贡献主题:https://github.com/xitu/juejin-markdown-themes
theme: juejin highlight:
最近在用 Vue 开发项目的时候有一个需求,需要导入 word 文档,并且需要支持多选。element-ui
的 upload
组件支持多选文件,只需要配置参数 multiple
为 true
即可。但是这个组件默认会将多选的文件分多次进行上传,于是就会存在多次的上传请求,由于后台的接口要求是一次请求能够上传多个文件,且我们也知道请求多了会对服务器造成更大的压力,因而基于多种原因,这个 upload
的上传行为得进行改造一番。
先来看下改造前后的结果
改造前的结果:同时上传2个文件,会发出2次对接口的请求,每次请求里包含了一个文件。
改造后的结果:同时上传2个文件,会发出一次接口请求,接口入参里包含2个文件。
方法一:通过配置file-list(推荐使用)
html部分:
<el-upload
class="upload-demo list-uploadbtn"
ref="upload"
:action="curBastUrl"
:auto-upload="false"
:on-remove="updataRemove"
:before-upload="beforeUpload"
:on-change="updatachange"
:file-list="fileList"
:multiple="true">
<el-button size="small">点击上传</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">确 定</el-button>
js部分:
submitUpload() { // 导入
let formData = new FormData(); // 用FormData存放上传文件
this.fileList.forEach(file => {
formData.append('file', file.raw)
})
formData.append('categoryDirectory', this.filedata.categoryDirectory)
// importCase是上传接口
importCase(formData).then((res) => {
//手动上传无法触发成功或失败的钩子函数,因此这里手动调用
this.updataSuccess(res.data)
}, (err) => {
})
}
关键代码说明:
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
里存放文件。版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 大海我来了 原文链接:https://juejin.im/post/6917057560763711502