el-upload多選文件上傳報(bào)錯(cuò)解決方案
在element-ui中，el-upload可以進(jìn)行文件多選操作。
在多選文件上傳時(shí)，會(huì)循環(huán)調(diào)用上傳方法。在第一次循環(huán)時(shí)，文件可以正常上傳，第二次開(kāi)始就會(huì)在
progress事件中報(bào)錯(cuò)：
嘗試上傳2個(gè)文件，在這里打印progress事件的參數(shù)：
會(huì)發(fā)現(xiàn)在第二次循環(huán)的時(shí)候，事件獲取不到file，所以接下來(lái)的操作無(wú)法正常進(jìn)行。如果不處理這個(gè)問(wèn)題的話，上傳方法依然可以使用，只不過(guò)最終傳上去的只是第一個(gè)文件。
本人目前還不知道是什么原因造成了這個(gè)結(jié)果。但是經(jīng)過(guò)查找相關(guān)問(wèn)題找到了解決辦法：
在進(jìn)行文件多選上傳的時(shí)候，創(chuàng)建一個(gè)中間變量去進(jìn)行對(duì)文件的添加和刪除操作，原有的filelist只進(jìn)行頁(yè)面列表的顯示，在提交表單的時(shí)候?qū)?shù)據(jù)進(jìn)行處理，將中間變量的值重新賦給接口需要的字段。這么做的目的就是避免去直接操作filelist。
這里只展示關(guān)鍵部分代碼：
/**
* file：上傳成功后的文件參數(shù)
* isMultiple：true=>多選；false：=>單選
*/
handlePictureSuccess(file,isMultiple){
// 單選、多選是可配字段，在這里進(jìn)行分別處理
if(isMultiple){
···
// file返回的數(shù)據(jù)很多，只添加需要的數(shù)據(jù)
this.realFileList.push({path:file.path,name:file.name,url:file.url})
···
}else{
···
this.fileList.push({path:file.path,name:file.name,url:file.url})
···
}
},
/**
* 提交表單
* form：表單
*/
submitFn(form){
···
const fileList = []
this.$refs.Form.realFileList.forEach(el=>{
fileList.push(el)
})
···
},到此這篇關(guān)于el-upload多選文件上傳報(bào)錯(cuò)解決方案的文章就介紹到這了,更多相關(guān)el-upload多選文件上傳 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果
這篇文章主要介紹了vue Nprogress頁(yè)面頂部進(jìn)度條功能實(shí)現(xiàn),NProgress是頁(yè)面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條，本文通過(guò)實(shí)例代碼給大家講解，需要的朋友可以參考下2022-12-12
本文主要介紹了elementui下image組件的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
今天小編就為大家分享一篇對(duì)VUE中的對(duì)象添加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
一個(gè)Vue視頻媒體多段裁剪組件的實(shí)現(xiàn)示例
這篇文章主要介紹了一個(gè)Vue媒體多段裁剪組件的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架，本文通過(guò)實(shí)例給大家介紹了vue入門(mén)教程適用小白初學(xué)者，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
這篇文章主要介紹了vue表格(table)計(jì)算總計(jì)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值
這篇文章主要介紹了vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)（推薦）
這篇文章主要介紹了頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3+elementplus前端生成圖片驗(yàn)證碼完整代碼舉例
在開(kāi)發(fā)過(guò)程中有時(shí)候需要使用圖片驗(yàn)證碼進(jìn)行增加安全強(qiáng)度,在點(diǎn)擊圖片時(shí)更新新的圖片驗(yàn)證碼,記錄此功能,以便后期使用,這篇文章主要給大家介紹了關(guān)于vue3+elementplus前端生成圖片驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-03-03
Vue是人氣爆棚且地表最強(qiáng)的JS（JavaScript）框架,祂允許我們構(gòu)建動(dòng)態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會(huì)遭遇內(nèi)存泄漏,導(dǎo)致性能暴跌和意外行為,今天,我們將深入Vue App內(nèi)存泄漏的原因,并探討識(shí)別和修復(fù)這些問(wèn)題的錦囊妙計(jì)2023-11-11