原因：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上传组件自定义方法无法获取进度内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复