描述

在使用 element ui 的el-upload 自定義元件時，出現一個問題，上傳圖片時，圖片被擠到後面，上傳完成之後又回來的效果

在網上找了一圈，講的都比較片面，沒有講到本質原因，故做個記錄。

問題1：

　　使用 http-request 不能觸發 on-success 函式。

原因：

　　使用 http-request 時，需要返回 promise 物件，才會觸發 on-success。

　　

解決方法：

　　將 ttp-request 函式結果返回 promise 物件即可。

問題2： 上傳抖動問題

原因：

一般使用自定義上傳圖片，即將後臺返回的資料跟處理成 el-upload 需要的格式。

fileSuccess(res, file, filelist) {
   this.fileList.push({...res.data});
},

但是 el-upload 元件內部是這麼處理的，大概意思就是，你上傳的時候，內部會有個對應的 fileList （uploadFiles），當你上傳的時候，內部 uploadFiles 會新增一個 file 資訊，當你從外部 push 時，會進入 el-upload 的watch 如下圖

此時，push 進去 file 與 內部的 file 是不一樣的（uid）不一樣。所以導致元件內部的互動錯亂。

解決方法：

在 on-success 裡直接賦值

onSuccess(res, file, filelist) {
    this.fileList = filelist;
},

如果，外部是伺服器傳回的地址，就在使用一個tempList 來管理伺服器的圖片上傳列表。然後其他的跟原來的元件沒啥區別，在做相應的操作的同時處理 tempList 。

完整程式碼片段如下：

<el-upload
    action="#"
    :file-list="fileList"
    list-type="picture-card"
    :limit="limit"
    :multiple="multiple"
    accept
 
="image/*"
    :before-upload="beforeUpload"
    :on-remove="fileRemove"
    :on-exceed="fileExceed"
    :on-success="fileSuccess"
    :http-request="fileUpload"
    :disabled="disabled"
    class="image-upload"
/>

//上傳圖片 fileUpload(file){ returnnew Promise(...); },
//上傳成功 fileSuccess(res,file,filelist){ this.fileList=filelist; 　　 this.tempList.push({...res.data}); }, //刪除圖片 fileRemove(file){ constindex=this.fileList.findIndex(item=>item.uid===file.uid); if(index===-1){ this.$message.error('刪除的檔案未找到'); return; } constfileName=this.tempList[index].fileName; this.tempList.splice(index,1); 　　// 伺服器刪除對應的資源 commonApi.fileDelete({fileName}) },