element使用upload组件时,增加覆盖第一个文件功能
2020-09-10 本文已影响0人
Poppy11
首先使用组件,这里记住就不要使用limit了,file-list是关键
<el-upload
v-else
class="upload"
:drag="true"
action=""
:multiple="true"
ref="upload"
accept='.mm'
:file-list="fileList"
:auto-upload="false"
:on-change="onChangeToolFile"
:before-remove="beforeRemove"
:on-remove="onRemoveFile"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
onChangeToolFile每次上传文件的时候都会触发这个方法,这时候我们就获得了fileList,也就是上传文件的列表,每次取最后一个文件就好了,然后赋值给我们自定定义在data里面的fileList。需要触发上传任务的时候, 取this.fileList[0]这里面的文件就好。
onChangeToolFile(file, fileList){
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1].raw] // 这一步,是 展示最后一次选择的文件
}
},
// 移除文件之前
beforeRemove(file, fileList) {
return this.$msgbox.alert(`确定移除 ${file.name}?`)
},
// 移除文件
onRemoveFile(file, fileList) {
this.upFileList = []
for (let x of fileList) {
if (x.raw) {
this.upFileList.push(x.raw)
}
}
},