vue element-ui el-upload組件多選文件上傳改造

Element UI 上傳圖片組件（支持多傳和單傳），多圖時報錯Cannot set property 'status' of null

注意fileLIst是只讀的，不能修改。我們這里使用uploadList來保存我們需要改動的數組，否則報錯Cannot set property 'status' of null：

  

上傳多圖時，第一張圖片file對象有值，后面就沒了，這邊就報錯了。

問題分析：每次上傳都會促發 handleBeforeUpload和handleUploadSuccess，傳幾張就會觸發幾次，經過反復調試，應該是handleUploadSuccess上傳回調方法執行多次$emit引起的

解決方案：聲明一個number變量用於記錄上傳圖片數量，上傳成功回調后通過判斷圖片數量與number一致時，執行一次$emit。

使用uploadList數組用來臨時保存上傳的多圖數組

 

 增加兩個變量 

uploadList:[],
number:0,

 

修改兩個方法：

1.handleBeforeUpload

// 上傳前loading加載，此方法的執行，始終在 handleUploadSuccess之前的（多圖時，全部圖片校驗過后才會去上傳）
handleBeforeUpload(file) {
　　....
　　// 放在末尾
　　this.number++; 
}

　　

 

2.handleUploadSuccess

// 上傳成功回調
handleUploadSuccess(res) {
  this.uploadList.push({ name: res.fileName, url: res.fileName });
  if(this.uploadList.length===this.number){
    this.fileList = this.fileList.concat(this.uploadList);
    this.uploadList = [];
    this.number = 0;
    this.$emit("input", this.listToString(this.fileList));
  }
  this.loading.close();
},