HTML表单文件切片上传逻辑在源代码层的设计

首先，一个常被忽略的事实是： 本身并不具备文件切片功能。它的作用仅在于让用户选择文件并暴露一个 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 不能直接 append ArrayBuffer，需要先转化为 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 确实无法提供任何帮助。