AJAX请求上传下载进度监控实现方式

1. 前言

在日常 Web 开发中，AJAX（Asynchronous JavaScript and XML）被广泛用于异步请求数据，而无需刷新整个页面。然而，当涉及到上传下载文件或执行长时刻运行的任务时，为了提升用户体验通常我们需要显示执行的进度条，那么监控请求的进度就变得尤为重要。

这里博主给大家讲解 XMLHttpRequest 和 Fetch API 以及 Axios封装 在进度监控上不同的实现方式

进度监控的核心场景：
1. 大文件上传/下载
2. 实时数据传输（如视频流）
3. 长耗时API请求
4. 用户交互反馈优化

2. 基于XMLHttpRequest的进度监控

在 JavaScript 中，XMLHttpRequest 提供了 progress 事件，允许我们监听请求的进度。

2.1 基础版文件上传监控

<input type=”file” id=”fileInput”><progress id=”uploadProgress” value=”0″ max=”100″></progress><script>document.getElementById(‘fileInput’).addEventListener(‘change’, function(e) const file = e.target.files[0]; if (!file) return; const xhr = new XMLHttpRequest(); const progressBar = document.getElementById(‘uploadProgress’); xhr.upload.addEventListener(‘progress’, (e) => if (e.lengthComputable) const percent = (e.loaded / e.total) * 100; progressBar.value = percent; console.log(`上传进度: $percent.toFixed(1)}%`); } }); xhr.addEventListener(‘load’, () => console.log(‘上传完成’); }); xhr.open(‘POST’, ‘/upload’, true); xhr.send(file);});</script>

2.2 增强版多事件监控

我们还可以集合 progress 进行多事件监控，如下代码：

function uploadWithProgress(file) return new Promise((resolve, reject) => const xhr = new XMLHttpRequest(); // 上传进度监控 xhr.upload.addEventListener(‘progress’, (e) => handleProgress(‘upload’, e); }); // 下载进度监控（当服务器返回大数据时） xhr.addEventListener(‘progress’, (e) => handleProgress(‘download’, e); }); xhr.addEventListener(‘error’, reject); xhr.addEventListener(‘abort’, reject); xhr.addEventListener(‘load’, () => if (xhr.status >= 200 && xhr.status < 300) resolve(xhr.response); } else reject(xhr.statusText); } }); xhr.open(‘POST’, ‘/upload’); xhr.setRequestHeader(‘Content-Type’, ‘application/octet-stream’); xhr.send(file); function handleProgress(type, e) if (e.lengthComputable) const percent = (e.loaded / e.total) * 100; console.log(`$type} progress: $percent.toFixed(1)}%`); } } });}

3. 基于Fetch API 的进度监控

3.1 Fetch API + ReadableStream实现下载监控

Fetch API 本身没有直接提供进度事件，但我们可以利用 ReadableStream 对响应体进行分段读取，从而计算已加载的字节数。

当第一次请求链接 await fetch(url) 的时候通过获取 headers 中 Content-Length 返回的请求资源总大致，再结合 response.body.getReader() 来读取 body 内容来实现！

具体参考代码如下，小伙伴可以根据自身需求进行调整：

async function downloadLargeFile(url) const response = await fetch(url); const reader = response.body.getReader(); const contentLength = +response.headers.get(‘Content-Length’); let receivedLength = 0; const chunks = []; while(true) const done, value} = await reader.read(); if (done) break; chunks.push(value); receivedLength += value.length; const percent = (receivedLength / contentLength) * 100; console.log(`下载进度: $percent.toFixed(1)}%`); } const blob = new Blob(chunks); return blob;}// 使用示例downloadLargeFile(‘/large-file.zip’) .then(blob => const url = URL.createObjectURL(blob); const a = document.createElement(‘a’); a.href = url; a.download = ‘file.zip’; a.click(); });

3.2 Fetch API 上传进度监控（伪方案）

Fetch API 原生并不支持上传进度监控。不过可以采用将文件包装成一个自定义的 ReadableStream 来实现 “伪”上传进度监控 。
关键点在于，由于各浏览器对 Request 流处理的支持程度不一，该技巧可能并非在所有环境下都能稳定职业。博主建议非必要不要采用这种方式 ～

<!DOCTYPE html><html lang=”zh”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Fetch API 上传进度监控</title></head><body> <input type=”file” id=”fileInput”> <button onclick=”uploadFile()”>上传文件</button> <progress id=”progressBar” value=”0″ max=”100″></progress> <span id=”progressText”>0%</span> <script> function uploadFile() const fileInput = document.getElementById(‘fileInput’); const file = fileInput.files[0]; if (!file) alert(‘请选择文件’); return; } const progressBar = document.getElementById(‘progressBar’); const progressText = document.getElementById(‘progressText’); const total = file.size; let uploaded = 0; // 构造一个自定义的 ReadableStream 来包装文件流 const stream = new ReadableStream( start(controller) const reader = file.stream().getReader(); function push() reader.read().then(( done, value }) => if (done) controller.close(); return; } uploaded += value.byteLength; const percent = (uploaded / total) * 100; progressBar.value = percent; progressText.innerText = percent.toFixed(2) + ‘%’; controller.enqueue(value); push(); }).catch(error => console.error(‘读取文件错误：’, error); controller.error(error); }); } push(); } }); // 使用 Fetch API 发送 POST 请求 fetch(‘/upload’, method: ‘POST’, headers: // 根据后端要求设置合适的 Content-Type // 注意：如果使用 FormData 上传文件，浏览器会自动设置 multipart/form-data ‘Content-Type’: ‘application/octet-stream’ }, body: stream }) .then(response => response.json()) .then(data => console.log(‘上传成功：’, data); alert(‘上传完成’); }) .catch(error => console.error(‘上传失败：’, error); alert(‘上传失败’); }); } </script></body></html>

注意事项

上传进度：Fetch API 本身不提供上传进度事件，上述技巧通过包装文件流来模拟上传进度，但并非所有浏览器都支持这种方式，稳定性可能不如 XMLHttpRequest
内容类型：如果后端要求 multipart/form-data 格式，建议仍采用 XMLHttpRequest 或使用 FormData 对象，由于自定义流方式上传数据可能需要后端独特处理

4. Axios封装进度监控方案

通过封装 Axios 请求，可以同时监听上传和下载的进度，提升用户体验，再次之前我们先来看看未封装前最原始的上传和下载是怎样实现的～

4.1 Axios 上传进度监控

Axios 支持通过配置项 onUploadProgress 来监听上传进度。下面内容示例展示了怎样使用 Axios 上传文件，并在页面上显示进度信息：

<!DOCTYPE html><html lang=”zh”><head> <meta charset=”UTF-8″> <title>Axios 上传进度监控</title></head><body> <h2>文件上传（Axios）</h2> <input type=”file” id=”fileInput”> <button onclick=”uploadFile()”>上传文件</button> <br> <progress id=”uploadProgress” value=”0″ max=”100″ style=”width: 300px;”></progress> <span id=”uploadText”>0%</span> <!– 引入 Axios 库 –> <script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script> <script> function uploadFile() const fileInput = document.getElementById(‘fileInput’); const file = fileInput.files[0]; if (!file) alert(‘请选择文件’); return; } const formData = new FormData(); formData.append(‘file’, file); axios.post(‘/upload’, formData, headers: ‘Content-Type’: ‘multipart/form-data’ }, onUploadProgress: function (progressEvent) if (progressEvent.lengthComputable) const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total); document.getElementById(‘uploadProgress’).value = percent; document.getElementById(‘uploadText’).innerText = percent + ‘%’; } } }) .then(response => alert(‘上传成功’); console.log(response.data); }) .catch(error => alert(‘上传失败’); console.error(error); }); } </script></body></html>

代码解释：
使用 FormData 对象包装上传的文件；
通过 Axios 的 onUploadProgress 事件监听上传经过，并实时更新进度条和百分比显示。

4.2 Axios 下载进度监控

同理，Axios 还支持 onDownloadProgress 事件来监控文件下载进度。下面的示例展示了怎样通过 Axios 下载文件并实时显示下载进度：

<!DOCTYPE html><html lang=”zh”><head> <meta charset=”UTF-8″> <title>Axios 下载进度监控</title></head><body> <h2>文件下载（Axios）</h2> <button onclick=”downloadFile()”>下载文件</button> <br> <progress id=”downloadProgress” value=”0″ max=”100″ style=”width: 300px;”></progress> <span id=”downloadText”>0%</span> <!– 引入 Axios 库 –> <script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script> <script> function downloadFile() axios.get(‘/download’, responseType: ‘blob’, // 指定响应数据类型为 Blob onDownloadProgress: function (progressEvent) if (progressEvent.lengthComputable) const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total); document.getElementById(‘downloadProgress’).value = percent; document.getElementById(‘downloadText’).innerText = percent + ‘%’; } } }) .then(response => // 创建一个临时链接下载文件 const url = window.URL.createObjectURL(new Blob([response.data])); const a = document.createElement(‘a’); a.href = url; a.download = ‘downloaded_file’; document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(url); }) .catch(error => alert(‘下载失败’); console.error(error); }); } </script></body></html>

代码解释：
1、我们通过 axios.get 请求下载文件，并设置 responseType 为 blob；
2、通过 onDownloadProgress 事件监听下载进度，并更新进度条；
3、下载完成后利用 Blob 和临时链接触发浏览器下载文件。

4.3 封装 Axios 实例

为了在项目中更方便地使用进度监控功能，可以将 Axios 进行封装。例如，我们可以创建一个 Axios 实例，并在请求配置中统一处理上传和下载进度

import axios from ‘axios’;// 请求配置const axiosInstance = axios.create( onUploadProgress: progressEvent => const percent = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(`上传进度: $percent}%`); }, onDownloadProgress: progressEvent => const percent = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(`下载进度: $percent}%`); }});// 封装上传技巧async function axiosUpload(file) const formData = new FormData(); formData.append(‘file’, file); try const response = await axiosInstance.post(‘/upload’, formData, headers: ‘Content-Type’: ‘multipart/form-data’} }); return response.data; } catch (error) console.error(‘上传失败:’, error); throw error; }}

使用时，在页面中调用封装技巧即可，这样通过封装后的 Axios 实例，我们可以在项目中更加方便地复用进度监控功能。

5. 独特场景处理技巧

通常在一些独特场景下，针对进度监控我们还需要一些处理技巧，这里博主分享两个分别是 分块上传监控 和 带宽计算与预估

5. 1 分块上传监控

async function chunkedUpload(file, chunkSize = 1024 * 1024) const chunks = Math.ceil(file.size / chunkSize); let uploadedChunks = 0; for (let i = 0; i < chunks; i++) const start = i * chunkSize; const end = Math.min(start + chunkSize, file.size); const chunk = file.slice(start, end); await axios.post(‘/upload-chunk’, chunk, headers: ‘Content-Range’: `bytes $start}-$end-1}/$file.size}`}, onUploadProgress: e => const chunkPercent = (e.loaded / e.total) * 100; const totalPercent = ((uploadedChunks + e.loaded) / file.size) * 100; console.log(`分块进度: $chunkPercent.toFixed(1)}%`); console.log(`总进度: $totalPercent.toFixed(1)}%`); } }); uploadedChunks += chunk.size; }}

5. 2 带宽计算与预估

let startTime;let lastLoaded = 0;xhr.upload.addEventListener(‘progress’, e => if (!startTime) startTime = Date.now(); const currentTime = Date.now(); const elapsed = (currentTime – startTime) / 1000; // 秒 const speed = e.loaded / elapsed; // bytes/s const remaining = (e.total – e.loaded) / speed; // 剩余时刻 console.log(`传输速度: $formatBytes(speed)}/s`); console.log(`预计剩余时刻: $remaining.toFixed(1)}秒`);});function formatBytes(bytes) const units = [‘B’, ‘KB’, ‘MB’, ‘GB’]; let unitIndex = 0; while (bytes >= 1024 && unitIndex < units.length – 1) bytes /= 1024; unitIndex++; } return `$bytes.toFixed(1)} $units[unitIndex]}`;}

6. 小编归纳一下

本篇文章介绍了怎样在前端请求中监控上传和下载进度，并提供了完整的前端和后端代码示例。通过合理运用这些技术，开发者可以构建出具有专业级进度反馈的Web应用，显著提升用户在处理大文件传输时的体验。

希望能帮助小伙伴们在项目中更好地处理大文件传输，进步用户体验！

到此这篇关于AJAX请求上传下载进度监控指南的文章就介绍到这了,更多相关AJAX上传下载内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！

无论兄弟们可能感兴趣的文章:

SpringMVC+Ajax实现文件批量上传和下载功能实例代码
解决IE下AjaxSubmit上传文件提示下载文件难题
FormData+Ajax实现上传进度监控

漠度网