XML文件常用于数据交换、配置导入等场景，这类文件往往体积不小，动辄几十MB。如果上传过程没有任何反馈，用户体验会非常糟糕。要让页面展示一个实时滚动的进度条，核心在于拿到浏览器层面对上传过程的监控数据，而浏览器提供的上传事件正好能满足这个需求。下面我们从前端角度完整拆解这套方案。
一、用XMLHttpRequest的upload事件监听上传进度
虽然现在Fetch API很流行，但要获取上传进度，最成熟可靠的方案仍然是XMLHttpRequest。它提供了一个upload属性，这是一个XMLHttpRequestUpload对象，上面可以绑定onprogress、onload、onerror等事件。每当浏览器向服务器发送了一部分数据，onprogress就会被触发一次，事件对象中包含两个关键字段：loaded表示已发送的字节数，total表示本次请求要发送的总字节数。
下面是一个完整的基础实现，读取用户选择的XML文件并展示进度：
function uploadXmlFile(file) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
// 监听上传进度，核心事件
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log('已上传：' + percent + '%');
// 渲染进度条
var bar = document.getElementById('progress-bar');
bar.style.width = percent + '%';
document.getElementById('progress-text').innerText = percent + '%';
}
};
// 上传完成（发送完毕，服务器可能还在处理）
xhr.upload.onload = function () {
console.log('数据发送完毕，等待服务器响应');
};
// 请求整体成功
xhr.onload = function () {
if (xhr.status === 200) {
alert('XML文件上传成功');
}
};
xhr.onerror = function () {
alert('网络错误，上传失败');
};
var formData = new FormData();
formData.append('file', file);
xhr.send(formData);
}
// 绑定文件选择事件
document.getElementById('file-input').addEventListener('change', function (e) {
if (e.target.files.length > 0) {
uploadXmlFile(e.target.files[0]);
}
});
需要注意lengthComputable这个字段，它是一个布尔值。如果服务器没有返回正确的Content-Length信息，这个值可能是false，此时无法计算百分比。对于普通的FormData上传，绝大多数情况下它都是true，可以放心使用。
二、计算实时上传速率与剩余时间
光有百分比还不够，很多产品需求会要求展示当前的上传速度，比如“3.5 MB/s，预计还需8秒”。这就需要在进度事件的基础上自己做计算。思路很简单：记录上一次progress事件触发时的时间和已上传字节数，与本次对比，差值除以时间差就是瞬时速率。
var lastTime = Date.now();
var lastLoaded = 0;
xhr.upload.onprogress = function (e) {
var now = Date.now();
var deltaTime = (now - lastTime) / 1000; // 秒
var deltaLoaded = e.loaded - lastLoaded; // 字节
var speedBps = deltaLoaded / deltaTime; // 字节每秒
var speedMbps = (speedBps / 1024 / 1024).toFixed(2);
// 估算剩余时间
var remainBytes = e.total - e.loaded;
var remainSeconds = Math.ceil(remainBytes / speedBps);
console.log('速度: ' + speedMbps + ' MB/s, 预计剩余 ' + remainSeconds + ' 秒');
lastTime = now;
lastLoaded = e.loaded;
};
瞬时速率可能会剧烈波动，尤其是网络不稳定的时候，数字会跳来跳去。更好的做法是维护一个滑动窗口，取最近几次采样值的平均数来平滑显示。另外，剩余时间的估算在小文件上意义不大，因为文件几秒内就传完了，建议只在超过10MB的大文件上展示这个信息，小文件只展示百分比即可。
三、在Vue、React项目中用axios实现进度条
现代前端项目大多用axios发请求，它对上传进度做了友好封装，通过配置项onUploadProgress传入一个回调即可，回调参数与原生事件一致，框架层面不需要额外处理。
// Vue 3 组合式 API 示例
import axios from 'axios';
import { ref } from 'vue';
const percent = ref(0);
const uploading = ref(false);
async function uploadXml(file) {
uploading.value = true;
const formData = new FormData();
formData.append('file', file);
try {
await axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: function (e) {
percent.value = Math.round((e.loaded / e.total) * 100);
}
});
alert('上传成功');
} catch (err) {
alert('上传失败：' + err.message);
} finally {
uploading.value = false;
}
}
React中的写法几乎一样，只是把响应式变量换成useState。有一点要提醒：axios在0.x版本中e.total可能为undefined（取决于浏览器和发送方式），建议加一层保护，比如e.total ? Math.round(...) : 0，避免出现NaN。
四、进度条卡住不动与其它常见问题排查
实际开发中最常见的抱怨是“进度到100%了但接口还没返回”或者“进度一直卡在某个数字”。第一种情况是正常现象：progress事件只反映浏览器把数据发出去的过程，100%代表发送完毕，服务器解析大XML文件、写库都需要时间。解决方式是在进度到100%后把UI状态改为“服务器处理中”，而不是直接显示成功。
进度卡住不动通常有几个原因。一是请求被浏览器跨域预检阻塞，OPTIONS请求没通过，实际数据根本没开始发。二是服务器端有请求体大小限制，比如Nginx默认1MB，超出后连接中断，进度自然停住。三是某些代理服务器会先缓冲整个请求体再转发，此时浏览器到代理之间传得飞快，之后长时间停滞，看起来像卡死。排查时先看Network面板中请求是否处于pending状态，再检查服务端的client_max_body_size等配置。
还有一种进阶场景：超大XML文件采用分片上传，每片有自己的进度。合并进度也很简单，用已完成的分片数乘以单片大小，再加上当前分片的已传字节数，除以文件总大小。分片上传还能配合断点续传，把每片的状态存到localStorage里，刷新页面后从断点继续，进一步提升体验。
总结一下，实现XML文件上传进度条的关键就三步：监听upload的progress事件、用loaded和total算百分比、按需扩展速率计算。原生项目用XMLHttpRequest，框架项目用axios的onUploadProgress，两者底层机制完全相同，掌握了其中一个就能顺利迁移到另一个。