概述
原因: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上传组件自定义方法无法获取进度所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复