axios如何获取发送数据进度(上传进度)?

面向对象编程 / 2023-05-09 / 原文

原理

axios的post方法,config配置有一个onUploadProgress属性,它接收一个回调函数,参数是上传进度事件(假设命名为:progressEvent),
progressEvent.loaded:上传进度
progressEvent.total:总大小

解决办法

js

axios.post('/your-upload-url', formData, {
	headers: {
		'Content-Type': 'multipart/form-data'
	},
	onUploadProgress: (progressEvent) => {
		// 计算上传进度百分比
		this.uploadPercent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
	}
})
}.catch(res) {
	console.error('Error uploading file:', res)
}