这次给大家带来axios如何给上传图片添加进度条，axios给上传图片添加进度条的注意事项有哪些，下面就是实战案例，一起来看一下。
axios 是一个基于 promise 的 http 库，可以用在浏览器和 node.js 中。
features
从浏览器中创建 xmlhttprequests
从 node.js 创建 http 请求
支持 promise api
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 json 数据
客户端支持防御 xsrf
下面给大家介绍使用axios实现上传图片进度条功能，具体内容介绍如下所示：
在最近做的项目中，一个手机页面最多要上传几十张图片，虽然对照片做了压缩处理，不过最后还是很大，如果网卡的话，上传的时间很差，如果一直在loading的话，用户都不知道什自己上传了多少，为了更直观的展现上传的进度，最好显示进度条，和显示上传的百分比；
项目用的是vuejs框架，mint-ui做为ui框架；请求的是vue官方推荐的axios（真的很强大）；在axios官方介绍了使用原生上传处理进度事件（具体参考这里，这里有中文的axios官方介绍）：
onuploadprogress: function (progressevent) {   // 对原生进度事件的处理  },
因为使用vuejs，对于接口的数据请求，为方便管理，需要统一的管理。如果放在每个组件里，不方便日后的维护和管理；在reqwest.js文件里，定义了一个uploadphoto方法，该方法有三个参数，分别是参数，和两个回调函数，参数就是我们要上传图片的需要的额参数；而第一个回调函数，是获取上传进度包含的数据，第二回调是获取上传成功失败，后台返回的数据；来进行页面的下一步操作。
uploadphoto(payload,callback1,callback2){     axios({       url:base_url + '/handler/material/upload',       method:'post',       onuploadprogress:function(progressevent){ //原生获取上传进度的事件         if(progressevent.lengthcomputable){           //属性lengthcomputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量           //如果lengthcomputable为false，就获取不到progressevent.total和progressevent.loaded           callback1(progressevent);         }       },       data:payload     }).then(res =>{       callback2(res.data);     }).then(error =>{       console.log(error)     })   }
使用mint-ui组件里的progress组件，在data的方法里定义该组件里的变量precent，该变量是number类型，在定义的时候，注意；
<mt-progress :value="precent" :bar-height="10">    <p slot="end">{{math.ceil(precent)}}%</p>   </mt-progress>
把reqwest.js 这个文件import 进来，获取到uploadphoto这个方法，根据获取上传的进度，使用$nexttick 这个属性，实时的更新的页面上。
const _this = this; api.uploadphoto(fd,(res) =>{  let loaded = res.loaded,    total = res.total;    _this.$nexttick(() =>{     _this.precent = (loaded/total) * 100;    }) },(res) =>{   if(res.code === '200'){     messagebox.alert('图片上传成功').then(action => {      console.log('ok');     });   } })
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js的json数据分组怎样优化
ajax直接改变状态和删除无刷新状态
以上就是axios如何给上传图片添加进度条的详细内容。