axios 上传文件获去上传进度

最新推荐文章于 2024-03-08 10:17:53 发布

原创最新推荐文章于 2024-03-08 10:17:53 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

vue成长之路同时被 2 个专栏收录

28 篇文章

订阅专栏

20 篇文章

订阅专栏

本文介绍了如何在使用axios进行POST上传文件时，利用onUploadProgress事件实时监控上传进度，并通过示例展示了如何在progress回调中获取并更新上传百分比。

onUploadProgress 介绍

axios({
	methods: 'POST',
	url: 'your upload url',
	data: 'your data',
	onUploadProgress(e) {
		console.log(e.loaded) // 已上传大小
		console.log(e.total) // 文件总大小
		console.log(Math.floor(e.loaded / e.total * 100)) // 上传进度百分比
	}
})

onUploadProgress 使用

uploadFile(data, onUploadProgress) {
	axios({
		methods: 'POST',
		url: 'your upload url',
		data
		onUploadProgress
	})
}

// 调用
uploadFile({}, e => {
	this.progress = Math.floor(e.loaded / e.total * 100)  // progress data中属性
})