深入理解axios.onUploadProgress

在現代 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  {
        console.log(results);
    })
    .catch(error => {
        console.log(error);
    });

在上述代碼示例中，我們將文件切割成了 CHUNKS_COUNT 個部分，並將它們分別進行上傳。每個部分的大小為 BYTES_PER_CHUNK。這個值可以自行設定，這裡我們設置為了 1MB。在上傳時，每個部分單獨使用 FormData 進行上傳，最後使用 Promise.all 等待所有上傳任務都完成。

五、結論

本文從多個方面深入理解了 axios.onUploadProgress，分別介紹了它的基礎用法、如何處理上傳進度條、並發上傳文件時如何監聽進度以及如何處理大文件上傳。在項目開發中，我們需要根據實際需求靈活運用這些技巧，以提高開發效率和用戶體驗。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/207027.html