返回
上传文件时如何掌握进度？ 获取上传进度API 一次搞懂
前端
2023-03-04 23:13:34
前端监听上传进度：axios 与原生的选择
在前端开发中，实时获取文件上传进度至关重要。本文将介绍两种常用方法：使用 axios 库和原生 ajax。
1. 使用 axios
axios 是一个流行的 JavaScript 库，提供了简单的 API 用于监听上传进度。只需在请求中添加 onProgress 回调函数即可。这个函数将在上传进度发生变化时被调用，并提供已上传字节数、总字节数等信息。
步骤：
- 引入 axios：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 创建上传请求：
const formData = new FormData();
formData.append('file', file);
const config = {
onProgress: function (progressEvent) {
const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`上传进度：${percentage}%`);
}
};
axios.post('/upload', formData, config).then((response) => {
console.log('上传成功！');
});
优点：
- 易于使用：只需添加回调函数即可监听进度。
- 跨浏览器兼容：支持所有主流浏览器。
- 功能强大：提供请求拦截器、响应拦截器等高级功能。
缺点：
- 体积较大：可能影响网页加载速度。
- 需要手动实现进度条：axios 本身不提供进度条组件。
2. 使用原生 ajax
原生 ajax 也可以获取上传进度。但需要手动处理上传进度事件。
步骤：
- 创建 XMLHttpRequest 对象：
const xhr = new XMLHttpRequest();
- 添加上传进度事件监听器：
xhr.upload.addEventListener('progress', function (progressEvent) {
const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`上传进度：${percentage}%`);
});
- 发送上传请求：
xhr.open('POST', '/upload');
xhr.send(formData);
优点：
- 轻量级：体积小，不影响网页加载速度。
- 兼容性好：支持所有主流浏览器。
缺点：
- API 复杂：需要手动处理上传进度事件。
- 需要手动实现进度条：原生 ajax 本身也不提供进度条组件。
结论
在选择 axios 和原生 ajax 时，需要根据具体需求权衡利弊。axios 更易于使用、功能更强大，但体积较大。原生 ajax 体积小、兼容性更好，但需要手动处理进度事件。无论采用哪种方法，都可以满足前端文件上传进度监听的需求。
常见问题解答
- axios 和原生 ajax 的区别是什么？
axios 提供更简单的 API 和高级功能，原生 ajax 则需要手动处理事件。 - 哪种方法更适合我？
如果您需要更易用的方式，则选择 axios；如果您需要轻量级的解决方案，则选择原生 ajax。 - 如何显示进度条？
需要自己实现进度条组件，并使用上传进度信息更新其状态。 - 如何处理上传错误？
可以通过在onProgress或progress事件处理程序中检查error属性来处理上传错误。 - 如何取消上传？
可以通过调用XMLHttpRequest.abort()或axios.cancel()方法来取消上传。
