使用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实现上传图片进度条功能