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实现上传图片进度条功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!