好资源导航 » 文章资讯 » 使用axios实现上传图片进度条功能

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

2023-09-19 00:26:06 64

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

Features

从浏览器中创建XMLHttpRequests

从node.js创建http请求

支持PromiseAPI

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换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类型，在定义的时候，注意；


{{Math.ceil(precent)}}%

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

const_this=this;
API.uploadPhoto(fd,(res)=>{
letloaded=res.loaded,
total=res.total;
_this.$nextTick(()=>{
_this.precent=(loaded/total)*100;
})
},(res)=>{
if(res.code==='200'){
MessageBox.alert('图片上传成功').then(action=>{
console.log('ok');
});
}
})

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

总结

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐