标签：异步 删除 confirm 确认 upload element file 组件

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

标签：异步,删除,confirm,确认,upload,element,file,组件
来源： https://blog.csdn.net/qq_32963841/article/details/121151984

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。