element upload 上傳多文件時on-success方法只執行一次的解決

描述：點擊上傳按鈕，顯示打開窗口，可以多選，當點擊確定時，自動上傳。上傳是先通過:action 屬性綁定的url上傳到服務器。上傳成功后返回file信息，此時需要再調一個接口，把請求到的數據傳回去。

下面的log是我在on-success打印的，此時on-success只調用一次，而且只有第一張狀態是上傳成功的。

 

 

 

 

 

<el-upload
      :action="URL"
      :with-credentials="true"
      :file-list="uploadArr"
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :list-type="''"
      multiple
      class="upload"
      ref="uploadRef"
      :on-remove="handleRemove"
    >
      <el-button icon="el-icon-upload2">上傳文件</el-button>
</el-upload>

handleSuccess(res, file, fileList) { // 圖片上傳服務器后的回調
      if (res.status === 1) {
        this.urlList(res, file, fileList);// 以方法的形式調用就可以了，每一張圖片都會到這個方法里
      } else {
        this.delShowFile(file, fileList);
        this.$message.error(file.name + '上傳失敗!');
      }
    },
    // 把上傳失敗的從list中刪除
    delShowFile(file, fileList) {
      let index = fileList.findIndex(item => {
          return item.name === file.name;
        });
        if (index !== -1) {
          fileList.splice(index, 1); 
        }
    },
    urlList(res, file1, fileList) { // 為了回顯，保存服務器傳回URL
      const { data, file } = res;
      const temp = JSON.parse(file);
      const time = this.getTime(new Date());
      const url = data.img_url[0];
      this.filesUpload(time, temp.name, url);
      this.delShowFile(file1, fileList);
    },
    async filesUpload(time, file, imgUrl) {
      const params = {
        id: this.$route.query.id,
        file: imgUrl,
        type: this.type
      };
      await contactUpload(params).then((res) => {
          if (res.status == 1) {
            this.$message.success(res.msg);
          }
      });
    },

記錄一下，寫的有點亂