原因：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毫秒加载一次进度
方案二：真实进度条；文章来源：https://www.toymoban.com/news/detail-611719.html
axios({ url:url，
methods: 'post',
data: data,
onUploadProgress:onUploadProgress
})
axios参数里有个回调onUploadProgress，该回调可以实时监听上传进度，可以用于进度条利用该回调的参数ProgressEvent 获取上传量和总量，计算出进度文章来源地址https://www.toymoban.com/news/detail-611719.html
到了这里，关于vue项目element-ui上传组件自定义方法无法获取进度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
