快捷導(dǎo)航

Vue使用el-upload批量上傳圖片時報錯問題處理方法

更新時間：2023年06月07日 11:41:40 作者：-Grain-

相信大家都知道在element-ui中,el-upload可以進行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時報錯問題的處理方法,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下

項目場景：

項目場景：項目中有一個文件上傳的場景，使用el-upload組件進行上傳，單圖上傳是正常，但是在進行批量上傳時報了錯。

問題描述

使用el-upload在進行多圖批量上傳時系統(tǒng)提示報錯。

報錯提示：

Uncaught TypeError: Cannot set properties of null (setting 'status')
at VueComponent.handleProgress (element-ui.common.js:29656:1)
at Object.onProgress (element-ui.common.js:29373:1)
at XMLHttpRequestUpload.progress (element-ui.common.js:29039:1)

原因分析：

在網(wǎng)上找了許多解決方案，有的說是因為el-upload組件file-list綁定的數(shù)組不可以手動修改，需要在on-success方法中使用另一個數(shù)組來存放文件，但實際操作下來還是有諸多問題，后來認真看了報錯信息，思考是否跟文件上傳時的狀態(tài)有關(guān)。

在on-success方法中將fileList console.log出來

Success (res, file, fileList) {
   console.log(fileList, 'fileList')
 }

發(fā)現(xiàn)當?shù)谝粡埳蟼魍瓿蓵r后面幾張的status的值都為ready，是否在on-success中回傳給file-list的值只取success狀態(tài)下的呢？導(dǎo)致on-success只觸發(fā)了一次，后面幾張因為status問題而不往下執(zhí)行了，于是決定使用every等所有圖片狀態(tài)都為success時再傳值給file-list。

解決方案：

使用every等所有圖片狀態(tài)都為success時再傳值給file-list

handleSuccess (res, file, fileList) {
      if (res.code == 200) {
        //參考如下代碼即可
        if (fileList.every(item => item.status == "success")) {
          //由于fileList是所有的文件包含之前已上傳過的，這里需要做區(qū)分（帶response的即為新上傳的）
          fileList.map(item => {
            item.response && this.fileList.push({ name: item.name, fileId: item.response.data.name, url: item.response.data.url });
          })
        }
        this.$emit('input', this.fileList)
      } else {
        fileList.filter(o => o.uid != file.uid)
        this.$emit('input', this.fileList)
        this.$message({ message: res.msg, type: 'error', duration: 1500 })
      }
    },

最后效果如下：