// e.loaded和e.total属性属于 JavaScript 中的 ProgressEvent 对象,在文件上传期间会被浏览器不断地更新,以确保上传进度得到及时的反馈。在 Axios 中,需要在上传请求中通过onUploadProgress属性传入该对象,比如:
axios.post('/upload', formData, {
onUploadProgress: e => {
console.log('已上传字节数:' + e.loaded);
console.log('总字节数:' + e.total);
}
});
// 在这里,onUploadProgress 是一个回调函数,该函数会在文件上传过程中被反复调用。而e 则是个ProgressEvent 对象,包含了与上传进度相关的一些属性。其中,e.loaded 表示上传的已完成的字节数,e.total 表示总字节数。需要注意的是,不同的浏览器和操作系统可能会返回不同的属性值。如果你使用的是 Vuejs,也可以使用axios.create 方法在组件内部创建一个自定义的Axios实例,并设置默认的onUploadProgress 回调:
export default {
// 其他代码
methods: {
upload() {
// 创建自定义 Axios 实例
const instance = axios.create({
onUploadProgress: e => {
console.log('已上传字节数:' + e.loaded);
console.log('总字节数:' + e.total);
}
});
// 发出请求
instance.post('/upload', formData);
}
}
}
这样,该组件内部所有的请求都会默认使用 instance 实例,且会默认携带 onuploadProgress
回调函数。