主要是因為 每一行 都有一個上傳，所以需要 設置不一樣的 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()
}