HTML文件Input切片上传设计与优化

切片上传的基本原理

许多开发者可能忽视一个重要事实： 本身不具备切片功能。它的作用仅限于让用户选择文件，并提供一个 File 对象。切片上传的实现完全依赖前端 Ja vaScript 手动拆解文件并逐块发送。浏览器并不会自动将大文件切成小块上传，这一点常被误解。

因此，真正的处理流程如下：获取 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 事件中直接启动上传存在风险。如果用户快速切换文件，之前的上传请求可能仍在后台运行，容易引发竞态条件。正确做法是先取消所有待处理的请求。

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 无法直接追加 ArrayBuffer，必须先转换为 Blob，即 new Blob([arrayBuffer])。

切片大小设多少？1MB 还是 5MB？

这个问题没有标准答案，完全取决于网络环境和后端服务的限制。如果设置过小（如 128KB），HTTP 头部开销占比会急剧上升，请求数量爆炸；设置过大（如 20MB），单次失败的重传成本将很高，且在移动端或弱网环境下，浏览器内存容易紧张。

• 业界常见切片大小为 1–5MB。PC 端通常设置为 4MB，弱网环境或移动端建议降低至 1–2MB。
• 不建议硬编码固定值。可结合 na vigator.onLine 和 NetworkInformation.effectiveType 动态调整切片大小。
• 后端需明确告知前端单次上传的最大限制。例如 Nginx 的 client_max_body_size、Spring 的 spring.servlet.multipart.max-request-size，前端切片不能超过该值。
• 另有一些隐藏问题：部分 CDN 或 WAF 会对单次请求体大小额外限制。比如阿里云 SLB 默认上限为 10MB，超出会返回 413。这些均需提前与后端确认。

上传中断后怎么续传？关键不在 HTML，而在 JS 状态管理

续传能力与 完全无关。核心在于 Ja vaScript 记录哪些 chunk_index 已成功上传，恢复时直接跳过。HTML 层只需保证文件对象可复用，即不销毁 File 引用。

• 上传开始前，先生成唯一 uploadId。通常基于文件路径、大小和 lastModified 的哈希值生成，用于服务端识别属于同一文件的不同上传尝试。
• 每块上传成功后，在本地记录状态：{ uploadId, uploadedChunks: [0,1,3] }。可存储于 localStorage，但更推荐使用 indexedDB，可靠性更高。
• 重新开始上传时，先发送 GET /upload/statusupload_id=xxx 请求查询服务端已接收的块信息，再与本地记录合并去重。
• 注意：input.files 在页面刷新后会被清空，用户需重新选择文件。但只要文件内容未变，uploadId 仍可匹配，续传逻辑不受影响。

实际上，这项技术最困难的地方并不在于如何切片，而在于状态同步和错误恢复。例如网络突然闪断，某一块的请求虽已发出，但未收到服务端的确认响应。此时需要依靠服务端实现幂等接口，或客户端利用重试逻辑加去重来兜底。在这个阶段，HTML 确实帮不上任何忙。