Upload 组件⾃身具有上传进度处理的 on-progress 属性（⻅⽂档），但设置 http-request 进⾏⾃定义上传后，这个属性就⽆效了。

这时我们可以通过 Axios 的请求配置项 onUploadProgress 进⾏进度监测，onUploadProgress 本质是对 H5 的 xhr.upload.onprogress 的封装。

// services/course.js … // 上传图⽚（添加配置项与参数） export const uploadCourseImage = (data, onUploadProgress) => { return request({ method: ‘POST’, url: ‘/boss/course/upload’, data, // Axios 将 HTML5 新增的上传进度事件：progress onUploadProgress (event) { console.log(event.loaded, event.total) } }) }

将 onUploadProgress 设置为参数

// services/course.js … // 上传图⽚（添加配置项与参数） export const uploadCourseImage = (data, onUploadProgress) => { return request({ method: ‘POST’, url: ‘/boss/course/upload’, data, // Axios 将 HTML5 新增的上传进度事件：progress onUploadProgress }) }

上传请求时传⼊进度处理回调，计算百分⽐并保存到 data 中

// course-image.vue … data () { return { … // 保存上传进度百分⽐ precentage: 0 } }, … async handleUpload (options) { … // 设置进度回调，进⾏百分⽐计算 const { data } = await uploadCourseImage(fd, (event) => { this.precentage = Math.floor(event.loaded / event.total * 100 ) }) … }

最后将数据绑定给 el-progress 组件即可。

// course-image.vue … … :percentage=“precentage” > …

绑定后上传可以正常显示进度，但如果重复上传时进度会出现‘回退’的现象，可以在上传完毕后将precentage 设置归零即可。

// course-image.vue … async handleUpload (options) { … if (data.code === ‘000000’) { … // 上传成功后，设置进度信息归零，避免下次上传出现回退效果 this.precentage = 0 } } …

最后可以给进度组件设置 status 以区分上传的不同状态。

// course-image.vue … … :status=“precentage === 100 ? ‘success’ : undefined” > …