Vue使用Axios实现文件上传进度实时更新
文件上传的实时进度条效果，前端其实可以搞得顺滑。Vue 搭配 axios，加上个监听就能轻松实现。关键点是用onUploadProgress，你可以一边上传一边看着进度条走，适合上传图片、视频这类大文件的场景。
axios 本身就挺灵活，基于 Promise，还能兼容浏览器和 Node.js 两端。你只要npm install axios装一下就能用，CDN 也有，方便得。如果你习惯用 cnpm，那就cnpm install axios，国内源快一点。
实现思路其实不复杂，关键代码是这样：
axios.post('/upload', formData, {
onUploadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`上传进度：${percent}%`);
}
})progressEvent对象里有loaded和total两个属性，算一下就能实时显示百分比。你可以绑定到el-progress组件，UI 也直观。
哦对，如果你是做多文件上传，也可以参考下多文件上传带进度这篇文章，思路差不多，就是需要遍历每个文件单独。
你要是还没搞清楚浏览器上传是怎么监听进度的，可以看看这篇HTML5 带进度条上传文件（XMLHttpRequest），其实 axios 底层也是封装这个来的。
，axios 配合 Vue做上传，省事好用。如果你上传逻辑还停留在传统表单那套，是时候升级下体验啦～
文件大小：50.15KB
评论区