如何用JavaScript实现一个文件上传组件_如何显示进度和处理错误？

夢幻星辰 2025-12-16 00:00:00 次阅读

JavaScript文件上传组件需用XMLHttpRequest监听upload.onprogress获取进度，FormData封装文件，统一处理onload（200–299成功）、onerror（网络异常）和ontimeout（超时），确保上传过程透明可控。

用 JavaScript 实现一个带进度显示和错误处理的文件上传组件，核心在于利用 XMLHttpRequest 或 fetch + FormData，并监听上传过程中的事件。关键不是“能不能传”，而是“传得明白、出错可知、体验可控”。

用 XMLHttpRequest 监听上传进度

XMLHttpRequest 提供了 upload.onprogress 事件，能实时获取已上传字节数和总大小，适合做进度条。

创建 new XMLHttpRequest()，调用 open('POST', url)
绑定 xhr.upload.onprogress = e => { if (e.lengthComputable) { ... } }，其中 e.loaded 是已传字节数，e.total 是文件总大小
用 Math.round((e.loaded / e.total) * 100) 算百分比，更新 UI（比如或自定义 div）

用 FormData 构建上传数据

前端选中文件后，用 FormData 包裹，可自动设置 Content-Type: multipart/form-data，服务端也容易解析。

从的 files[0] 获取文件对象
const fd = new FormData(); fd.append('file', file);（字段名需和服务端约定一致）
可额外加其他字段：fd.append('name', 'xxx');

统一处理成功、失败与网络异常

上传结果不能只靠 onload 判断，要覆盖常见错误路径：

xhr.onload：状态码为 200–299 视为成功；否则进错误分支
xhr.onerror：网络中断、跨域失败、请求被阻止等
xhr.ontimeout：手动设 xhr.timeout = 30000，超时后触发
服务端返回非 2xx 但有 JSON 错误信息？用 JSON.parse(xhr.responseText) 提取提示（注意 try-catch）

简单封装成可复用函数（示例）

把逻辑收拢，对外暴露清晰接口：

function uploadFile(file, url, onProgress, onSuccess, onError) {
  const xhr = new XMLHttpRequest();
  const fd = new FormData();
  fd.append('file', file);
xhr.upload.onprogress = e => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
onProgress?.(percent);
}
};
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
onSuccess?.(JSON.parse(xhr.responseText));
} else {
onError?.(new Error(HTTP ${xhr.status}: ${xhr.statusText}));
}
};
xhr.onerror = () => onError?.(new Error('Network error'));
xhr.ontimeout = () => onError?.(new Error('Request timeout'));
xhr.timeout = 30000;
xhr.open('POST', url);
xhr.send(fd);
}