vue展示接口实时进度以及制作进度条

接口配置示例
export function postFile(data, config) {
var axiosConfig = {
url: userApi.File,
timeout: 6000,
method: ‘post’,
data
}
if (config instanceof Object) {
for (let key in config) {
axiosConfig[key] = config[key]
}
}
return request(axiosConfig)
}

请求接口示例

let config = {
onUploadProgress: progressEvent => {
that.visible = true; // 进度条展示
if (!progressEvent.lengthComputable) return;
//请求实时进度
that.percent = parseInt(progressEvent.loaded / progressEvent.total * 100)
}
}
postFile(formData, config).then(res => {
if (res.Result == 200) {
that.successful = true;
that.SheetNO = res.SheetNO;
that.modelvisible = true;
} else {
that.errorVisible = true;
message.error(res.Message, 5);
}
}).catch((error) => {
})