element中upload组件中的确认删除问题
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
这是一个拖拽上传的组件,如果你需要给他加入一个确认上传的功能你就需要使用:before-remove这个钩子函数,而它会在删除前触发返回false则停止删除。
似乎很简单的问题,但当你用element中的Message弹窗组件时
async befReomve(file) {
let res = await this.$confirm("确认删除属性吗?", "删除属性").catch(
err => {
return err;
}
);
if (res === "cancel") {
this.$message.success("成功取消删除");
return false
}
你会发现无论点击确认或者取消都会删除图片。我经过测试发现了原因,因为$confirm组件需要进行异步处理所以我在函数头加了async这导致这成为了一个异步,在el-upload组件中因为等不到异步的返回结果所以就直接删除了图片
befReomve(file) {
if (file.status === "success") {
return this.$confirm(`确认删除${file.name}吗`, "确认删除");
}
}
只需要在函数中直接返回this.$confirm,如果点击取消返回的错误自动会转换为false没有异步处理所以就不会出现点击取消也会删除的问题了