axios中提供了onUploadProgress回调函数,可以在此函数中实现监听文件的上传进度
tips:
- Axios的本质是XHR的promise封装,所以XHR的一些函数对它也同样适用。
- 上传请求的请求头中
Content-Type
必须为multipart/form-data
,但有时还需要加上其他参数
axios
.post("/api/file/uploadfile", form, {
headers: {
"Content-Type": "multipart/form-data",
},
onUploadProgress: (progressEvent) => {
if (progressEvent.lengthComputable) {
this.progresss = Math.round(
(progressEvent.loaded / progressEvent.total) * 100
);
}
},
})
.then((res) => {
// ...
});