首先，一个常被忽略的事实是： 本身并不具备文件切片功能。它的作用仅在于让用户选择文件并暴露一个 File 对象。所谓的“切片上传”，实质上是前端 JavaScript 在后台手动拆分文件、逐块发送。浏览器不会因为你选择了一个大文件就自动将其切分为小块上传——这一点经常被误解。
因此，真正的处理流程是这样的：获取 File 对象后，利用 File.slice() 或 ArrayBuffer 按字节位置手动切割成多个小 Blob，再通过 fetch 或 XMLHttpRequest 逐个发送。
- 通过
input.files[0]取得File实例，它本身继承自Blob，所以可以直接调用.slice(start, end)。 - 需要注意的细节：
start和end的单位是字节，与字符数无关；同时end是开区间，即不包含该位置，切勿写成end - 1。 - 切片后得到的是全新的
Blob，需要将其封装进FormData。设置字段名（如file_chunk）时务必注意，否则后端将无法获取你的二进制数据。 - 另外有一个容易踩坑的地方：在
change事件中直接开始上传并不安全。如果用户快速切换文件，上一次上传请求仍挂在后台，极易导致竞态问题。正确的做法是先取消所有 pending 请求。
FormData 中如何传递切片与元信息？
每次上传一个切片时，不能只发送文件块，还必须附带其上下文信息：当前是哪一块、总块数、文件唯一标识（通常用 file.name 加上 file.lastModified 拼接出一个 hash），以及原始文件的总大小。这些字段不建议仅通过 URL 参数传递——容易被拦截或因长度过长出现问题。统一放入 FormData 是最稳妥的方案。
- 写法上很简单：
formData.append("chunk_index", i)、formData.append("total_chunks", Math.ceil(file.size / chunkSize))。 - 文件块本身的做法：
formData.append("file", blob, file.name)。第三个参数会设置Content-Disposition中的filename，后端解析时依赖该字段。 - 如果服务端要求携带签名或 token，也应作为字段加入，例如
formData.append("upload_id", uploadId)。 - 有一个限制必须牢记：
FormData不能直接 appendArrayBuffer，需要先转化为Blob，即new Blob([arrayBuffer])。
切片大小设多少？1MB 还是 5MB？
这个问题没有标准答案，完全取决于网络环境和后端服务的限制。如果设置过小（如 128KB），HTTP 头部开销占比将急剧上升，请求数量暴增；设置过大（如 20MB），单次失败的重传成本会很高，且在移动端或弱网环境下，浏览器内存容易告急。
- 行业普遍做法是 1–5MB。PC 端一般设为 4MB，弱网环境或移动端建议降至 1–2MB。
- 不建议硬编码固定值。可以结合
navigator.onLine和NetworkInformation.effectiveType进行动态调整。 - 后端需明确告知前端最大单块大小限制。例如 Nginx 的
client_max_body_size、Spring 的spring.servlet.multipart.max-request-size，前端的切片不能超出该值。 - 还有隐藏陷阱：某些 CDN 或 WAF 会额外限制单次请求体大小。例如阿里云 SLB 默认上限为 10MB，超出直接返回 413。这些都需要提前确认。
上传中断后如何续传？关键不在 HTML，而在 JS 状态管理
续传能力与 完全无关。核心在于 JavaScript 记录哪些 chunk_index 已成功上传，恢复时直接跳过。HTML 层只需保证文件对象可复用，即不销毁 File 引用。
- 上传开始前，先生成一个唯一
uploadId。通常基于文件路径、大小和lastModified的 hash 生成。该 ID 用于让服务端识别同一文件的不同上传尝试。 - 每块上传成功后，在本地存储状态记录：
{ uploadId, uploadedChunks: [0,1,3] }。可存于localStorage，但更推荐indexedDB，后者更可靠。 - 重新开始上传时，先发送
GET /upload/status?upload_id=xxx查询服务端已有的已传块信息，再与本地记录做并集去重。 - 注意一点：
input.files在页面刷新后会被清空，用户必须重新选择文件。但只要文件本身未变，uploadId依然能匹配，续传逻辑就能正常运作。
实际上，这项技术最困难的地方不在于如何切片，而在于状态同步和错误恢复。例如网络突然闪断，某一块的请求虽然已发出，但未收到服务端的确认响应。这时需要服务端实现幂等接口，或客户端利用重试逻辑加去重来做兜底。在这个阶段，HTML 确实无法提供任何帮助。