事先聲明，本人系.net後端老菜鳥，vue接觸沒有多長時間，若是存在技術分享錯誤，切莫見怪，第一次寫博，還請大佬們多多擔待，轉載請註明出處謝謝！vue
最近項目用到餓了麼上傳，因而參照官網接入el-upload發現無進度條停頓了一下直接顯示上傳成功有些不友好，on-progress方法也沒法觸發，百度了下大概是mockjs引入的問題，註釋就行了，通常狀況下是沒有問題。後端
但本人後面才接手的項目，項目裏已經不少地方有存在引用mockjs，致使我按照百度註釋mock引入後，vue界面打不開的問題函數
F12看下js報錯spa
具體緣由我也沒有細查，大概是其它地方有引用mock，單純註釋會致使報錯，固然若是你有耐心去查項目哪些地方引用了而後修改再來註釋也能夠.net
若是你不想修改原來已經寫好的部分，能夠參考下本人的解決方案3d
由於upload自帶的進度條沒法使用了，因此咱們能夠在el-upload後面加上el-progress進度條，on-progress沒法使用咱們能夠用on-change函數替代具體以下：調試
初始化兩個屬性值，showProcess用於顯示進度條，processLenghth用於顯示進度條的百分比blog
on-change函數在上傳開始、上傳成功、上傳失敗均會調用，調試參數file發現上傳開始file屬性status值爲ready,上傳成功status的值爲sucess,所以咱們對這兩種狀態進行處理（注：正常狀況下on-progress函數的file參數有個進度百分比的屬性值能夠直接使用）class
在上傳開始的時候寫個計時器，百分比重置爲0，調用頻率各位自行設定，計時器中對百分比進行累加，達到99中止累加
在上傳成功的時候計進度條百分比設爲100表示已上傳完成，而後設置showProcess屬性值爲false隱藏進度條，效果以下：監控
OK，搞定，雖然不是真實的監控上傳進度，但對於用戶相對比較友好一點
第一次寫博，有些地方有錯誤請指出謝謝，轉載請註明出處，對於文字功底差的我完整寫一篇不容易，謝謝！