前端 Blob.slice 上传分片时怎么计算最后一片长度

前端做大文件分片上传时，最后一片的长度不是“固定分片大小减去某个余数”这么容易混淆，最稳妥的写法是先算实际结束位置：actualEnd = Math.min(start + chunkSize, file.size)，再用 actualEnd - start 得到本片长度。Blob.slice(start, end) 的 end 是排他的，所以它不会多取一个字节。

最后一片的长度只看实际结束位置

假设文件大小为 10.5 MB，每片 4 MB，三片的区间分别是 [0, 4 MB)、[4 MB, 8 MB) 和 [8 MB, 10.5 MB)。因此前两片各为 4 MB，最后一片是 2.5 MB。这里的关键不是把文件“补齐”，而是把结束位置截到 file.size。

参数可以这样对照：

用一个函数把边界计算固定下来

不要单独用余数去驱动切片，直接让切片对象的真实 size 成为最终依据。这样既能处理最后一片不足固定大小，也能避免把整除场景误判成一个 0 字节尾片。

function getChunk(file, index, chunkSize) {
  // 计算当前分片的左边界，单位是字节
  const start = index * chunkSize;
  // end 是排他边界，不能越过源文件末尾
  const actualEnd = Math.min(start + chunkSize, file.size);
  // slice 返回新的 Blob，原 File 不会被修改
  const chunk = file.slice(start, actualEnd);

  return {
    index,
    start,
    end: actualEnd,
    length: chunk.size,
    chunk,
  };
}

例如文件为 10.5 MB、分片大小为 4 MB，索引为 2 时，start 是 8 MB，actualEnd 是 10.5 MB，返回的 length 就是 2.5 MB。上传请求的请求体使用返回值里的 chunk 即可，服务端是否需要序号、总片数和校验值是另一层协议问题。

对象 URL 只服务于预览，不替代上传 Blob

URL.createObjectURL(file) 得到的是浏览器本地的临时引用，适合给 、 或下载链接做预览。分片上传本身不需要先把 Blob 变成对象 URL；直接把 slice() 返回的 Blob 交给 fetch 或 XMLHttpRequest 更清楚。

function previewFile(file, img) {
  // 新预览替换旧预览前，先释放旧的对象 URL
  if (img.dataset.objectUrl) {
    URL.revokeObjectURL(img.dataset.objectUrl);
  }

  const objectUrl = URL.createObjectURL(file);
  img.dataset.objectUrl = objectUrl;
  img.onload = () => {
    // 图片已经使用完临时引用，释放它但保留 img 的当前画面
    URL.revokeObjectURL(objectUrl);
    delete img.dataset.objectUrl;
  };
  img.src = objectUrl;
}

这段代码里的释放时机只针对预览 URL，不会释放原始 File，也不会让已经取出的分片失效。若预览失败或组件被销毁，还应在对应的错误处理和卸载逻辑中释放仍保存的 URL；但不要在图片还没加载前立刻 revoke，否则预览可能打不开。

四个边界场景值得单独核对

• 文件大小整除：例如 8 MB 文件按 4 MB 分片，索引 0 和 1 都是完整分片，不需要再造一个 0 字节尾片。
• 最后一片不足固定大小：以 chunk.size 或 actualEnd - start 为准，不要把 chunkSize 当成真实长度。
• 索引越界：当 start >= file.size 时，slice 会返回空 Blob；生成循环应以已知片数或 start 作为条件。
• 空文件：file.size 为 0 时没有可上传的字节，是否发送一个“空文件完成”请求应由业务协议决定。

最容易排查的清单只有三项：打印当前 index、start、actualEnd；确认 chunk.size === actualEnd - start；确认每一个对象 URL 都有和生命周期对应的 revokeObjectURL。

常见问题

最后一片能不能直接用 file.size % chunkSize？

可以用余数描述“最后一片长度”，但余数为 0 时它会产生歧义。实际切片更推荐用 actualEnd - start，整除和非整除都统一。

Blob.slice 会复制整个文件吗？

它返回一个新的 Blob 视图对象，正文只需要依赖其公开的 size 和内容；不要把它理解成修改了原 File。是否发生底层复制由浏览器实现决定，业务代码不应依赖这一点。

上传前一定要创建对象 URL 吗？

不需要。对象 URL 是预览引用，上传请求直接使用切出来的 Blob；把两者分开能减少无用的 URL 生命周期管理。

可继续核对 MDN 的 Blob.slice()、Blob 和 URL.revokeObjectURL() 说明，重点看 end 的排他语义与对象 URL 的释放时机。