鍍金池/ 問答/HTML/ 使用element-UI的el-upload組件刪除當(dāng)前圖片如何實(shí)現(xiàn)點(diǎn)擊確定得到

使用element-UI的el-upload組件刪除當(dāng)前圖片如何實(shí)現(xiàn)點(diǎn)擊確定得到后臺返回值后再刪除圖片

  1. 在使用element-UI使用圖片上傳中，對于已經(jīng)上傳的圖片filelist，點(diǎn)擊刪除按鈕，彈出確認(rèn)按鈕開始請求后臺，等到后臺返回正確結(jié)果后再刪除圖片。
  2. 代碼：
 this.$confirm('此操作將刪除當(dāng)前圖片, 是否繼續(xù)?', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        ajaxDelete(deletePic + '?id=' + file.id, this.handleDeleteSuc, this.handleDeleteFail)
                    })

3.但是現(xiàn)在問題一點(diǎn)擊確定就立即刪除了圖片不等后臺返回結(jié)果。

4.鏈接描述

回答
編輯回答
蟲児飛

upload中有個(gè)before-remove --------------刪除文件之前的鉤子，參數(shù)為上傳的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，則停止刪除。文檔寫的。
在before-remove里進(jìn)行彈出確認(rèn)

2018年9月9日 05:05
編輯回答
情已空

我的解決方法是:

methods:{
  reqDeletePic (file,fileList) {
      this.$confirm('此操作將刪除當(dāng)前會(huì)場, 是否繼續(xù)?', '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.asyncReq(file,fileList) // 在這里真正的處理圖片列表
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消刪除'
                    });
                });
       return false; // 這是重點(diǎn),不管上面的操作結(jié)果如何都返回false
      },
    asyncReq (file,fileList) {
        // 處理圖片列表
        // 遠(yuǎn)請求服務(wù)器如果成功則把fileList中要?jiǎng)h除的file移除即可
    }
2017年2月28日 19:17