需求:后台一个管理系统采用 vue elementui 框架,现需要使用el-upload 标签进行图片上传操作,但是项目中需要实现一次性选中多张图片上传,上传之后要改变显示的列表的名称。

1
2
3
4
5
6
<el-upload class="file-upload" ref="upload" action=""
:before-upload="uploadBefore" :on-success="uploadSuccess" multiple :limit="3000"
:on-exceed="uploadExceed" :on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList">
<el-button slot="trigger" size="mini" type="primary">上传文件</el-button>
</el-upload>

通过查询elementui 的API发现,虽然upload标签支持一次性上传多张图片,但是还是一个一个附件进行异步上传,而组件的成功事件有一个机制,
就是上传成功一个就更新上传列表fileList,所以只会留下接口异步返回最后一个成功的附件,而我们还要修改后台返回显示的结果,所以不能在on-success里写对数组的处理,
且上传时候即使监控fileList,也并不触发watch或computed,所有就要在状态改变方法中做抓到最后一次的成功状态。

1.加上方法 :on-change=”uploadChange”。

1
2
3
4
5
6
7
<el-upload class="file-upload" ref="upload" action=""
:before-upload="uploadBefore" :on-success="uploadSuccess" multiple :limit="3000"
:on-exceed="uploadExceed" :on-preview="handlePreview"
:on-change="uploadChange"
:on-remove="handleRemove" :file-list="fileList">
<el-button slot="trigger" size="mini" type="primary">上传文件</el-button>
</el-upload>

2.处理返回值

如果上传10个附件,这个方法就会被调用10次,但是实际上前9次都是没有用的,只有第10次,10个附件的上传返回的status才都是是success

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
uploadSuccess: function (response, file, fileList) {
this.temp = []
console.log(this.$refs.upload.uploadFiles)
this.$refs.upload.uploadFiles.forEach(e => {
// 把成功的状态的对象过滤过来,不处理状态为uploading的
if (e.status === "success") {
if (e.response) { // 处理后台返回的值
this.temp.push({
content_: e.response.data.content_,
createDate_: e.response.data.createDate_,
fjId_: e.response.data.id_,
name: '附件 ' + e.response.data.id_,
url: e.response.data.url,
status: 'success'
})
} else if (e.fkStaMemberQyfjId_) {
// 数组里已经处理的对象不做处理
}
}
})
},

3.抓住最后一次上传的(附件列表都成功的状态)

只要列表中状态改变on-change就会被调用

1
2
3
4
5
6
7
uploadChange (file, fileList) {
// 确保是最后一次
if (this.$refs.upload.uploadFiles.filter(i =>{ return i.status !== "success" }).length === 0) {
fileList = this.temp
this.fileList = [...this.fileList, ...this.temp]
}
}

× 打赏我吧
打赏二维码