項目場景：

項目場景：項目中有一個文件上傳的場景，使用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)

原因分析：

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

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

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

發(fā)現(xiàn)當第一張上傳完成時后面幾張的status的值都為ready，是否在on-success中回傳給file-list的值只取success狀態(tài)下的呢？導致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 })
      }
    },

?最后效果如下：

文章來源地址http://www.zghlxwxcb.cn/news/detail-462241.html

到了這里，關于Vue中使用的el-upload時批量上傳圖片時報錯問題處理的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！