我是靠谱客的博主 小巧毛衣,最近开发中收集的这篇文章主要介绍vue项目element-ui上传组件自定义方法无法获取进度,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

原因:element-ui中的up-load组件使用时,若用自定义上传http-request,会重新申明XMLHttpRequest,on-progress里的申明则被覆盖,无法使用该钩子,无法添加进度条

方案一:假进度条;写个假进度条优化用户体验,使用el-upload组件里on-change方法的status状态,配合定时器 ,以vue3为例 ,

uploadPercent.value = 0 //进度条初始为0
const interval = setInterval(() => { 
 	if (uploadPercent.value >= 99) {
 		clearInterval(interval)  //进度条满了清除定时器
 		return
 	}
 	uploadPercent.value += 1 //进度条进度
}, 200 ) //每200毫秒加载一次进度

方案二:真实进度条;

axios({	url:url,
		methods: 'post',
		data: data,
		onUploadProgress:onUploadProgress
})

axios参数里有个回调onUploadProgress,该回调可以实时监听上传进度,可以用于进度条利用该回调的参数ProgressEvent 获取上传量和总量,计算出进度

最后

以上就是小巧毛衣为你收集整理的vue项目element-ui上传组件自定义方法无法获取进度的全部内容,希望文章能够帮你解决vue项目element-ui上传组件自定义方法无法获取进度所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(38)

评论列表共有 0 条评论

立即
投稿
返回
顶部