el-upload進度條無效,on-progress無效問題解決方案


  事先聲明,本人系.net后端老菜鳥,vue接觸沒有多長時間,如果存在技術分享錯誤,切莫見怪,第一次寫博,還請大佬們多多擔待,轉載請注明出處謝謝!

  最近項目用到餓了么上傳,於是參照官網接入el-upload發現無進度條停頓了一下直接顯示上傳成功有些不友好,on-progress方法也無法觸發,百度了下大概是mockjs引入的問題,注釋就好了,一般情況下是沒有問題。

但本人后面才接手的項目,項目里已經很多地方有存在引用mockjs,導致我按照百度注釋mock引入后,vue界面打不開的問題

  

  

  F12看下js報錯

  具體原因我也沒有細查,大概是其它地方有引用mock,單純注釋會導致報錯,當然如果你有耐心去查項目哪些地方引用了然后修改再來注釋也可以

  如果你不想修改原來已經寫好的部分,可以參考下本人的解決方案

  因為upload自帶的進度條無法使用了,所以我們可以在el-upload后面加上el-progress進度條,on-progress無法使用我們可以用on-change函數替代具體如下:

  

 

 

 

 

 

 

 

 

 

 

初始化兩個屬性值,showProcess用於顯示進度條,processLenghth用於顯示進度條的百分比

  

 

 

 

 

 

 

 

 

 

 

 

  on-change函數在上傳開始、上傳成功、上傳失敗均會調用,調試參數file發現上傳開始file屬性status值為ready,上傳成功status的值為sucess,因此我們對這兩種狀態進行處理(注:正常情況下on-progress函數的file參數有個進度百分比的屬性值可以直接使用

  在上傳開始的時候寫個計時器,百分比重置為0,調用頻率各位自行設定,計時器中對百分比進行累加,達到99停止累加
  在上傳成功的時候計進度條百分比設為100表示已上傳完成,然后設置showProcess屬性值為false隱藏進度條,效果如下:

 

  OK,搞定,雖然不是真實的監控上傳進度,但對於用戶相對比較友好一點

  第一次寫博,有些地方有錯誤請指出謝謝,轉載請注明出處,對於文字功底差的我完整寫一篇不容易,謝謝!

 

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM