在接口真正上传的时候加入当前的上传的进度。
1.如果没有对axios进行封装,可以使用:
axios({
method:'post',
headers: {
"Content-Type": "multipart/form-data"
},
url:"xxx",
data:form,
onUploadProgress: progressEvent => {
this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1))
}
}).then((res)=>{
})
2. 如果对axios进行了封装,则将处理的事件加入到config中
export function UploadFile(data,config,progeressFun) {
config.onUploadProgress=progeressFun
return request({
url: 'xxx',
method: 'post',
data,
config
})
}
在页面中使用:
<a-progress :percent="Math.round(loaded/total*100)" />
progess(progress){
this.loaded=progress.loaded
this.total=progress.total
},
upload(type,fileItem) {
...
uploadFile(formData,_this.progess).then((response) => {
...
})
}