深入理解axios.onUploadProgress

发布时间：2023-05-19

在现代 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，分别介绍了它的基础用法、如何处理上传进度条、并发上传文件时如何监听进度以及如何处理大文件上传。在项目开发中，我们需要根据实际需求灵活运用这些技巧，以提高开发效率和用户体验。

推荐文章