element中upload组件中的确认删除问题

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没有异步处理所以就不会出现点击取消也会删除的问题了