快捷導(dǎo)航

Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題處理方法

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

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

項(xiàng)目場(chǎng)景：

項(xiàng)目場(chǎng)景：項(xiàng)目中有一個(gè)文件上傳的場(chǎng)景，使用el-upload組件進(jìn)行上傳，單圖上傳是正常，但是在進(jìn)行批量上傳時(shí)報(bào)了錯(cuò)。

問(wèn)題描述

使用el-upload在進(jìn)行多圖批量上傳時(shí)系統(tǒng)提示報(bào)錯(cuò)。

報(bào)錯(cuò)提示：

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)上找了許多解決方案，有的說(shuō)是因?yàn)閑l-upload組件file-list綁定的數(shù)組不可以手動(dòng)修改，需要在on-success方法中使用另一個(gè)數(shù)組來(lái)存放文件，但實(shí)際操作下來(lái)還是有諸多問(wèn)題，后來(lái)認(rèn)真看了報(bào)錯(cuò)信息，思考是否跟文件上傳時(shí)的狀態(tài)有關(guān)。

在on-success方法中將fileList console.log出來(lái)

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

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

解決方案：

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

handleSuccess (res, file, fileList) {
      if (res.code == 200) {
        //參考如下代碼即可
        if (fileList.every(item => item.status == "success")) {
          //由于fileList是所有的文件包含之前已上傳過(guò)的，這里需要做區(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 })
      }
    },

最后效果如下：

總結(jié)

到此這篇關(guān)于Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題處理方法的文章就介紹到這了,更多相關(guān)Vue el-upload批量上傳圖片報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: