使用axios实现上传图片进度条功能

　　

Axios是一个基于承诺的HTTP库,可以用在浏览器和节点。js中。

　　

<强>功能
　　

　　

从浏览器中创建xmlhttprequest
　　

　　

从节点。js创建http请求
　　

　　

支持承诺API
　　

　　

拦截请求和响应
　　

　　

转换请求数据和响应数据
　　

　　

取消请求
　　

　　

自动转换JSON数据
　　

　　

客户端支持防御XSRF

　　

　　

在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在加载的话,用户都不知道什自己上传了多少,为了更直观的展现上传的进度,最好显示进度条,和显示上传的百分比;

　　

项目用的是vuejs框架,mint-ui做为ui框架;请求的是vue官方推荐的axios(真的很强大);在axios官方介绍了使用原生上传处理进度事件(具体参考这里,这里有中文的axios官方介绍):

　　 　　 　　uploadPhoto(载荷、callback1 callback2) { 　　axios ({ 　　url: BASE_URL +/处理/材料/上传, 　　方法:“文章”,> 　　& lt; mt-progress:价值=" https://www.yisu.com/zixun/precent ": bar-height=?0”比; 　　& lt; div槽="结束"在{{Math.ceil(领唱)}}% & lt;/div> 　　& lt;/mt-progress> 　　 　　

把reqwest。js这个文件进口进来,获取到uploadPhoto这个方法,根据获取上传的进度,使用美元nextTick这个属性,实时的更新的页面上。
　　

　　 　　 　　const _this=; 　　API.uploadPhoto (fd (res)=祝辞{ 　　让=res.loaded加载, 　　总=res.total; 　　_this。美元nextTick(()=祝辞{ 　　_this。领唱=(加载/总数)* 100; 　　}） 　　},(res)=祝辞{ 　　如果(res)。代码===' 200 '){ 　　MessageBox.alert(“图片上传成功”)。然后(action=比;{ 　　console.log(“好”); 　　}); 　　} 　　}) 　　 　　

根据上面的方法基本实现图片的上传进度和百分比的显示,剩下的就是ui了,根据自己个性化定制来实现你那完美的需求…

　　

　　

以上所述是小编给大家介绍的使用axios实现上传图片进度条功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

使用axios实现上传图片进度条功能