javascript axios 实现进度监控的示例代码

更新时间：2025年01月07日 09:22:19 作者：Amo 6729

在使用axios发送HTTP请求时,可以通过onUploadProgress和onDownloadProgress来监控上传和下载的进度,具有一定的参考价值,感兴趣的可以了解一下

1. 监控下载进度

axios 提供了一个 onDownloadProgress 回调函数，可以用来监听下载的进度。该回调会返回一个 progress 对象，包含 loaded（已经下载的字节数）和 total（文件的总字节数）等信息。

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. 监控上传进度

对于文件上传，也可以使用 onUploadProgress 来监控上传进度。该回调函数类似，也返回一个 progress 对象，包含上传的字节数和文件的总字节数。

const formData = new FormData();
formData.append('file', fileInput.files[0]); // 假设文件通过 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. 结合上传和下载进度

如果你需要同时监控上传和下载进度，可以在同一个 axios 请求中同时使用 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. 显示进度条

结合进度值，你可以使用浏览器的进度条（例如 <progress> 元素）来显示进度。

<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. 自定义进度显示

你还可以自定义进度条的显示方式，例如使用 console.log、alert 或自定义 DOM 元素显示进度。

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);
});

总结

使用 onDownloadProgress 和 onUploadProgress 可以实现文件的上传和下载进度监控。
你可以根据 progressEvent 获取到 loaded 和 total 字段，计算出上传或下载的进度百分比。
可以结合浏览器的 <progress> 元素或自定义进度条来显示上传或下载的进度。
axios 提供了非常简单且直接的方式来实现文件的进度监控，适用于大文件的上传和下载场景。

通过这些方法，你可以轻松地在前端实现文件上传和下载的进度显示。

到此这篇关于javascript axios 实现进度监控的示例代码的文章就介绍到这了,更多相关js axios进度监控内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决layui 表单元素radio不显示渲染的问题
今天小编就为大家分享一篇解决layui 表单元素radio不显示渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS实现双击内容变为可编辑状态
在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。怎么实现的呢？今天小编给大家分享JS实现双击内容变为可编辑状态，需要的的朋友参考下
2017-03-03
基于JS实现EOS隐藏错误提示层代码
本文给大家分享一段代码基于js实现EOS隐藏错误提示层，对eos隐藏提示层的相关知识感兴趣的朋友一起学习吧
2016-04-04
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
下面小编就为大家带来一篇JS当前页面登录注册框,固定DIV,底层阴影的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
JS图片预加载三种实现方法解析
这篇文章主要介绍了JS图片预加载三种实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
JavaScrip实现一个有时间限制的缓存类的方式
本文将探索 JavaScript 中一种基于自动过期机制的时间限制缓存实现方式,提高数据缓存策略的灵活性和效率,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-01-01
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
这篇文章主要介绍了最简单纯JavaScript实现Tab标签页切换的方式(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
JavaScript表单验证示例详解
这篇文章主要为大家详细介绍了JavaScript表单验证示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
JS获取经纬度并根据经纬度得到城市信息简单示例
前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下
2023-11-11
详解JS如何处理可视区域图片懒加载技巧
这篇文章主要为大家介绍了JS如何处理可视区域图片懒加载技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06