vue+axios实现文件上传的实时进度条
作者：卢老师和马老师
最近用vue写上传的时候,遇到一个需求就是页面上展示上传的进度条,之后写过一次,但是用的是假交互,直接从0-100,今天分享一下用axios自带的onUploadProgress来完成这个小需求,感兴趣的朋友可以参考下
前言
最近用vue写上传的时候，遇到一个需求就是页面上展示上传的进度条，之后写过一次，但是用的是假交互，直接从0-100，今天分享一下用axios自带的onUploadProgress来完成这个小需求。
封装
我们需要封装一下axios
export function uploadProgress(type, url, req, progress, timeout, headers) {
let h = headers || {
'Content-Type': 'application/json',
BsmAjaxHeader: true,
}
const flag = url.includes('forward')
h = setHeaderData(h, flag)
const r = req || {}
return axios({
url: `paas-web${url}`,
method: type,
data: r,
headers: h,
timeout,
onUploadProgress: progress,
})
}
拿着这个方法在api文件夹内写接口的地方引用
upload(req, back) {
return uploadProgress(
'POST',
'/api/XXX/XXX',
req,
back
)
},
接着在你的vue文件内，引入upload方法在上传时调用
this.upload(params, (progress) => {
const progress1 = `${(
(progress.loaded / progress.total) *
100
).toFixed(2)}`;
// 这里把值赋给data里的变量
this.percentage = +progress1;
})
.then((res) => {
if (res.data.code === 200) {
// 做相应的操作
} else {
// 做相应的操作
}
})
.finally(() => {
//这里要把值赋null 重置,也可以根据实际情况逻辑去定
this.percentage = null;
});
这个回调里面的progress就是返回的大小,需要自己拿到.loaded,.total计算一下
总结
我觉得重点在axios的onUploadProgress,具体去看axios官网怎么介绍这个api的,最后希望能帮助到各位,有什么错误地方也请评论指出
以上就是vue+axios实现文件上传的实时进度条的详细内容，更多关于vue+axios实时进度条的资料请关注脚本之家其它相关文章！