如何用javascript实现文件上传_进度条和分片上传怎么做【教程】

分片上传是解决大文件上传卡死的关键方案，需用Blob.slice()切分文件并逐片上传，配合进度计算、失败重试与断点续传预检，确保状态一致性。

为什么直接用 XMLHttpRequest 上传大文件会卡死或失败

浏览器对单次请求体大小没有硬性限制，但实际中超过几十 MB 就容易触发内存溢出、超时或服务端拒绝。更关键的是：XMLHttpRequest 默认把整个 File 对象读进内存再发出去，用户点选一个 2GB 视频后页面就可能无响应——这不是进度条能解决的问题，是架构层面必须分片。

怎么用 Blob.slice() 切分文件并逐片上传

分片不是靠后端“拆”，而是前端主动按字节切出小块（如每片 5MB），每片单独发一个 POST 请求。核心是用 Blob.slice()（注意不是 ArrayBuffer.slice()）获取子片段，并带上序号、总片数、文件唯一标识（如 file.name + file.lastModified 的哈希）供后端合并。

• Blob.slice() 的参数是 start 和 end 字节偏移量，不是数组索引，且 end 不包含在内
• 不要用 FileReader.readAsArrayBuffer() 全量读取后再切——这又回到内存爆炸的老路；应直接对 file.slice() 结果发请求
• 每片请求需携带 headers: { 'Content-Range': 'bytes 0-5242879/10485760' } 或自定义字段如 X-Chunk-Index: 0

const chunkSize = 5 * 1024 * 1024; // 5MB let start = 0; const totalSize = file.size; 
while (start < totalSize) { const end = Math.min(start + chunkSize, totalSize); const chunk = file.slice(start, end);
await uploadChunk(chunk, { index: Math.floor(start / chunkSize), totalChunks: Math.ceil(totalSize / chunkSize), fileId: generateFileId(file), });
start = end; }

怎么让 XMLHttpRequest.upload.onprogress 真实反映单片进度

这个事件只对当前请求有效，不能跨片累计。想显示“整体上传进度”，必须自己维护已上传字节数，并在每次 onprogress 中更新局部进度，再结合已成功上传的片数计算全局进度。

• Event.loaded 是当前片已发出的字节数，event.total 是当前片大小（即 chunk.size），不是整个文件
• 别用 event.lengthComputable 判断是否可用——它在大多数现代浏览器里恒为 true，但不可靠，应以 chunk.size 为准
• 如果某片上传失败，要重试该片，不能跳过；否则整体进度会错位

function uploadChunk(chunk, meta) {   return new Promise((resolve, reject) => {     const xhr = new XMLHttpRequest();     xhr.open('POST', '/upload/chunk');     xhr.upload.onprogress = (e) => {       const chunkProgress = e.loaded / chunk.size;       const overallProgress =          (meta.index * chunk.size + e.loaded) / file.size;       updateProgressBar(overallProgress);     };     xhr.onload = () => resolve(xhr.response);     xhr.onerror = reject;     xhr.send(chunk);   }); }

后端没做断点续传时，前端怎么避免重复上传同一片

网络抖动或页面刷新后，前端不知道哪些片已存到服务端。最轻量的做法是：上传前先发个 HEAD 或 GET /upload/status?fileId=xxx&index=2 查询该片是否存在。服务端返回 200 表示已存在，跳过；404 则正常上传。

立即学习“Java免费学习笔记（深入）”；

• 这个预检请求必须带缓存控制头（Cache-Control: no-cache），否则浏览器可能返回旧响应
• 不要在上传完所有片后再统一校验——万一中间断了，就得重传全部
• 如果服务端不支持预检接口，前端至少要把已上传的 index 存进 localStorage，但要注意清理逻辑（比如文件名变更后旧记录要失效）

分片上传真正难的不是切和发，而是状态一致性：哪片成功、哪片失败、哪片服务端其实收到了但响应丢了——这些边界情况不处理，进度条再好看也没用。