最近在用vue，然後上傳檔案時需要顯示進度，於是網上搜了一下，經過自己實測終於也弄明白了
<h4>上傳檔案：
<pclass="input-zone">
<spanv-if="filename">}
<spanv-else>+請選擇檔案上傳+
<inputtype="file" name="file" value="" placeholder="請選擇檔案" @change="upload" multiple="multiple" />
<p>上傳進度：
<div
<divclass="progress-progress" :style="uploadstyle">
<divclass="progress-rate">}%
.input-zone
.input-zone input[type='file']position:relative;height:50px; border-radius:5px;background-color: lightgrey; }position:absolute;left:0;top:0;height:100%;width:0%; border-radius:5px;background-color: darkturquoise;z-index:1; }position:relative;text-align:center;font-size:14px;line-height:50px;height:100%;z-index:2;}
varnewvue(
},
methods:
varconfig = ,
onuploadprogress:function(e)
}
}
};
axios.post("/ajaxpage/vueupload.aspx?method=upload", formdata, config)
.then(function(data)else
})
.catch(function(err) );
}
}
})
1.其實單檔案上傳和多檔案上傳的區別就是 input標籤中多了乙個屬性
multiple="multiple"
2.onuploadprogress 事件中顯示上傳為100%並不準確，一定要等到響應回來才能認為完成了100%，不然使用者此時關閉了瀏覽器的話，上傳就失敗了。或者有其它邏輯時，此時點提交，就會導致後台找不到上傳的檔案路徑等問題。
layui多檔案上傳分別顯示對應檔案的進度
3 邏輯js 參考如下，本地測試上傳大檔案可以比較容易看到進度條效果，不太確定上傳檔案進度是不是指載入好檔案的進度，因為檔案上傳進度為100 時，還要需要一定時間等待伺服器響應返回結果，所以下面 處理為當檔案進度為100 時，人工顯示99 當對應檔案的上傳請求完畢後done時才把進度顯示為100 當...
vue axios上傳多個附件並單獨顯示進度條
就是把input type file的opacity置為0，然後在底下放有樣式的元素，然後通過axios的 onuploadprogress 的引數total和loaded顯示進度，當然要在後端返回成功之後再把進度置為100 然後監聽一下檔案陣列，當所有進度都為1的時候就表示完成了。上傳附件 選擇檔...
react上傳檔案顯示上傳進度
axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器和 node.js 中。在使用react,vue框架的時候,如果需要監聽檔案上傳可以使用axios裡的onuploadprogress.確保有node環境 進入目錄 npm install antd 安裝antd ui元件 np...