分片上传是解决大文件上传卡死的关键方案，需用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，但要注意清理逻辑（比如文件名变更后旧记录要失效）
分片上传真正难的不是切和发，而是状态一致性：哪片成功、哪片失败、哪片服务端其实收到了但响应丢了——这些边界情况不处理，进度条再好看也没用。
