在现代 Web 开发中，文件上传已经成为了非常常见的需求。然而，由于文件大小的限制等问题，文件上传不一定能够一次性完成，这就需要我们使用实时反馈上传进度的功能 - axios.onUploadProgress。本文将从多个方面深入理解 axios.onUploadProgress，并且提供详细的代码示例。
一、axios.onUploadProgress 基础用法
axios 是一款基于 Promise 的 HTTP 库，它可以用于浏览器和 Node.js。axios.onUploadProgress 属性用于监听上传进度，以下是基础使用方法：
axios({
method: 'post',
url: '/upload',
data: formData,
onUploadProgress: function(progressEvent) {
console.log(progressEvent.loaded / progressEvent.total * 100 + "%");
}
});
这段代码中，我们通过传递一个包含 onUploadProgress 属性的配置对象，可以实现上传进度的监听功能。回调函数中的 progressEvent 包含了多个属性，其中 loaded 表示已上传的字节数，total 表示文件总大小。
二、处理上传进度条
基本上，我们不可能仅仅通过 console.log 将上传进度打印到控制台，而是需要将它展现给用户。下面是一个简单的上传进度条示例，使用了前端框架 Vue.js，核心逻辑是在监听到 onUploadProgress 事件时更新进度条宽度。
<html>
<body>
<div id="app">
<input type="file" @change="uploadFile">
<div class="progress-bar"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
progress: 0
},
methods: {
uploadFile(event) {
let formData = new FormData();
formData.append("file", event.target.files[0]);
let config = {
onUploadProgress: progressEvent => {
let progress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
this.progress = progress;
}
};
axios
.post('/upload', formData, config)
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
});
}
}
});
</script>
</body>
</html>
该例中，我们通过在 data 对象中添加 progress 属性，Vue.js 就可以响应式地更新进度条的宽度，其余代码逻辑与之前给出的基础用法相同。
三、并发上传文件时如何监听进度
实际上，我们可以监听多个文件的上传进度。以下是一个示例，它使用了 Promise.all 和 axios 的并发功能：
let files = [...document.querySelector('input[type=file]').files];
let data = new FormData();
files.forEach((file, index) => {
data.append('files[]', file);
});
let config = {
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(percentCompleted);
}
};
axios
.post('/upload', data, config)
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
});
如上述代码所示，我们可以将文件数组遍历一遍，将每个文件依次加到 FormData 对象中，同时在配置对象中增加 onUploadProgress 属性，就可以监听到多个文件的上传进度。
四、处理大文件上传
有时，我们需要上传非常大的文件，例如视频或者音频文件，这些文件可能会非常耗费时间。如果上传时间超过了服务器的限制，那么上传可能会失败。解决这个问题的常用方法是，将文件切割成多个部分，每一部分单独上传。
let file = document.querySelector('input[type=file]').files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB
const SIZE = file.size;
const CHUNKS_COUNT = Math.ceil(SIZE / BYTES_PER_CHUNK);
let promises = [];
for (let index = 0; index < CHUNKS_COUNT; index++) {
const start = BYTES_PER_CHUNK * index;
const end = Math.min(SIZE, start + BYTES_PER_CHUNK);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append("file", chunk);
let config = {
headers: {
"Content-Type": "multipart/form-data"
},
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(percentCompleted);
}
};
promises.push(
axios.post("/upload", formData, config)
);
}
Promise.all(promises)
.then(results => {
console.log(results);
})
.catch(error => {
console.log(error);
});
在上述代码示例中，我们将文件切割成了 CHUNKS_COUNT 个部分，并将它们分别进行上传。每个部分的大小为 BYTES_PER_CHUNK。这个值可以自行设定，这里我们设置为了 1MB。在上传时，每个部分单独使用 FormData 进行上传，最后使用 Promise.all 等待所有上传任务都完成。
五、结论
本文从多个方面深入理解了 axios.onUploadProgress，分别介绍了它的基础用法、如何处理上传进度条、并发上传文件时如何监听进度以及如何处理大文件上传。在项目开发中，我们需要根据实际需求灵活运用这些技巧，以提高开发效率和用户体验。
