使用element-ui的el-upload组件删除图片时如何在进行确认操作后再删除图片

以下这种写法在点击确定按钮后执行删除操作,会直接将图片删除,并没有等后台返回删除成功的结果,代码如下:.

 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
     
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
     
              //执行删除操作
              this.deleteImgFn();
            }).catch(() => {
     
            this.$message({
     
                type: 'info',
                message: '已取消删除'
            });          
            });

解决方法:
1.使用el-upload组件里的before-remove(删除文件之前的钩子)并返回false
2.在后台返回删除成功后将fileList中要删除的file移除即可
代码如下:

 beforeRemove(file, fileList){
     
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
     
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
     
              //执行删除操作
              this.deleteImgFn(file,fileList);
            }).catch(() => {
     
            this.$message({
     
                type: 'info',
                message: '已取消删除'
            });          
            });
            return false;
        },
 deleteImgFn(file,fileList){
     
       //请求后台删除接口,成功后将fileList中要删除的file移除
 }

你可能感兴趣的:(javascript)