现象:el-upload如果再on-remove,先调用$confirm 点了取消,也删了文件。
解决方案:
1、使用:before-remove钩子
<el-upload
ref="upload"
class="m-l-10"
:limit="1"
action=""
:accept="acceptSet(item)"
:before-upload="validFile"
:before-remove="e => fileRemove(e, item, index)"
:file-list="uploadObject[item.type].list"
:http-request="e => uploadFile(e, item, index)"
>
<el-button :disabled="uploadObject[item.type].list.length > 0" type="primary" plain size="small">
{{ $t('common.addTo') }}
</el-button>
</el-upload>
2、不管点击的取消还是确定按钮,finally里面都获取到最新数据。
// 文件移除
async fileRemove(e, item, index) {
try {
await this.$confirm(this.$t('tip.confirm.delete'), this.$t('common.warn'), {
confirmButtonText: this.$t('common.confirm'),
cancelButtonText: this.$t('common.cancel'),
type: 'warning'
})
const res = await configDelete({ roleId: this.$attrs['form-data'].roleDetail.id, type: item.type })
if (res.code === 200) {
// this.getList()
this.msgSuccess(this.$t('tip.success.delete'))
}
} catch {
// 手动维护文件列表以取消删除
// this.fileList = [...this.fileList]
return false
} finally {
this.getList()
}
},