主要是因为 每一行 都有一个上传，所以需要 设置不一样的 ref 用来 清空 上传 的 缓存文件
不论上传成功还是失败 清空 当前行的 文件内容 this.$refs['upload' + this.rowsIndex].clearFiles()
<el-upload
:key="scope.$index"
:ref="'upload'+ scope.$index"
action=""
accept=".doc,.docx"
:http-request="uploadFileFn"
:show-file-list="false"
:limit="1"
style="display:inline-block"
:before-upload="(file) => {beforeUpload(file,scope)}"
>
<el-button>上传</el-button>
</el-upload>
// 上传前
beforeUpload(file, row) {
this.isSuffix = false
this.rowsIndex = row.$index
// 判断是否是可上传的类型
if (this.strfiletypeextensionCur.filter(val => {
return getFileExtendingName(file.name).toLowerCase() === val
}).length === 0) {
this.isSuffix = true
}
if (this.isSuffix) {
this.$message.error('此文件类型不支持')
return false
}
},
// 上传
async uploadFileFn(param) {
if (param.file.size > 5242880) {
this.$message.error('请上传小于5M的附件')
return false
}
if (this.isSuffix === true) {
this.$refs['upload' + this.rowsIndex].clearFiles()
return false
}
const file = param.file
const formData = new FormData()
formData.append('files', file)
formData.append('presetfolder', JSON.stringify(this.filePath))
this.loading = true
const res = await uploadFile(formData)
this.loading = false
if (res.code === 20000) {
this.$message.success(res.message)
}
this.$refs['upload' + this.rowsIndex].clearFiles()
}