快捷導(dǎo)航

javascript axios 實(shí)現(xiàn)進(jìn)度監(jiān)控的示例代碼

更新時(shí)間：2025年01月07日 09:22:19 作者：Amo 6729

在使用axios發(fā)送HTTP請(qǐng)求時(shí),可以通過onUploadProgress和onDownloadProgress來監(jiān)控上傳和下載的進(jìn)度,具有一定的參考價(jià)值,感興趣的可以了解一下

1. 監(jiān)控下載進(jìn)度

axios 提供了一個(gè) onDownloadProgress 回調(diào)函數(shù)，可以用來監(jiān)聽下載的進(jìn)度。該回調(diào)會(huì)返回一個(gè) progress 對(duì)象，包含 loaded（已經(jīng)下載的字節(jié)數(shù)）和 total（文件的總字節(jié)數(shù)）等信息。

const axios = require('axios');

axios.get('https://example.com/large-file.zip', {
  onDownloadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Download Progress: ${percent}%`);
  }
})
.then(response => {
  console.log('Download completed!');
})
.catch(error => {
  console.error('Error downloading file:', error);
});

2. 監(jiān)控上傳進(jìn)度

對(duì)于文件上傳，也可以使用 onUploadProgress 來監(jiān)控上傳進(jìn)度。該回調(diào)函數(shù)類似，也返回一個(gè) progress 對(duì)象，包含上傳的字節(jié)數(shù)和文件的總字節(jié)數(shù)。

const formData = new FormData();
formData.append('file', fileInput.files[0]); // 假設(shè)文件通過 HTML 的文件輸入獲取

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percent}%`);
  }
})
.then(response => {
  console.log('Upload completed!');
})
.catch(error => {
  console.error('Error uploading file:', error);
});

3. 結(jié)合上傳和下載進(jìn)度

如果你需要同時(shí)監(jiān)控上傳和下載進(jìn)度，可以在同一個(gè) axios 請(qǐng)求中同時(shí)使用 onUploadProgress 和 onDownloadProgress：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percentUploaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percentUploaded}%`);
  },
  onDownloadProgress: (progressEvent) => {
    const percentDownloaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Download Progress: ${percentDownloaded}%`);
  }
})
.then(response => {
  console.log('Upload and download completed!');
})
.catch(error => {
  console.error('Error occurred:', error);
});

4. 顯示進(jìn)度條

結(jié)合進(jìn)度值，你可以使用瀏覽器的進(jìn)度條（例如 <progress> 元素）來顯示進(jìn)度。

<progress id="upload-progress" value="0" max="100"></progress>
<progress id="download-progress" value="0" max="100"></progress>

const uploadProgressBar = document.getElementById('upload-progress');
const downloadProgressBar = document.getElementById('download-progress');

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percentUploaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    uploadProgressBar.value = percentUploaded;
  },
  onDownloadProgress: (progressEvent) => {
    const percentDownloaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    downloadProgressBar.value = percentDownloaded;
  }
})
.then(response => {
  console.log('Upload and download completed!');
})
.catch(error => {
  console.error('Error occurred:', error);
});

5. 自定義進(jìn)度顯示

你還可以自定義進(jìn)度條的顯示方式，例如使用 console.log、alert 或自定義 DOM 元素顯示進(jìn)度。

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    document.getElementById('upload-status').innerText = `Upload Progress: ${percent}%`;
  },
  onDownloadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    document.getElementById('download-status').innerText = `Download Progress: ${percent}%`;
  }
})
.then(response => {
  console.log('Upload and download completed!');
})
.catch(error => {
  console.error('Error occurred:', error);
});

總結(jié)

使用 onDownloadProgress 和 onUploadProgress 可以實(shí)現(xiàn)文件的上傳和下載進(jìn)度監(jiān)控。
你可以根據(jù) progressEvent 獲取到 loaded 和 total 字段，計(jì)算出上傳或下載的進(jìn)度百分比。
可以結(jié)合瀏覽器的 <progress> 元素或自定義進(jìn)度條來顯示上傳或下載的進(jìn)度。
axios 提供了非常簡(jiǎn)單且直接的方式來實(shí)現(xiàn)文件的進(jìn)度監(jiān)控，適用于大文件的上傳和下載場(chǎng)景。

通過這些方法，你可以輕松地在前端實(shí)現(xiàn)文件上傳和下載的進(jìn)度顯示。

到此這篇關(guān)于javascript axios 實(shí)現(xiàn)進(jìn)度監(jiān)控的示例代碼的文章就介紹到這了,更多相關(guān)js axios進(jìn)度監(jiān)控內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: