分片上传必须绕开表单提交，手动切片并逐片发送：监听文件输入事件，用File.slice()截取Blob，每片构造独立FormData附带uploadId和chunkIndex，通过fetch发送；uploadId需全局唯一（如crypto.randomUUID），chunkIndex从0开始，总片数用Math.ceil(file.size / chunkSize)计算。

分片上传不能用

提交，必须手动切片发请求

原生 <form> 提交和分片上传在协议层互斥：前者是一次性发完整 multipart/form-data 请求，后者是多次独立请求，每片只含字节范围 + 元数据。强行把 File.slice() 结果塞进表单，浏览器仍按整个文件打包，后端收到的只是名为 chunk_3 的普通字段，不是可还原的二进制分片。

真实做法是彻底绕开表单提交：

• 监听 input[type="file"] 的 change 事件，拿到 File 对象
• 用 file.slice(start, end) 按固定大小（如 5 * 1024 * 1024）截取 Blob
• 每个分片单独构造 FormData，显式 append('file', chunk)，并带上 uploadId、chunkIndex 等元数据
• 用 fetch() 或 XMLHttpRequest 发送，避免页面刷新

uploadId 和 chunkIndex 必须前端生成且严格对齐

这两个字段是服务端识别归属、排序、拼接的唯一依据。错一帧，文件就损坏。

常见错误：

立即学习“前端免费学习笔记（深入）”；

• uploadId 用 Date.now() 或文件名生成 → 并发上传同名文件时冲突
• chunkIndex 从 1 开始，但后端按 0 起始合并 → 缺失首块
• 用 Math.floor(file.size / chunkSize) 算总片数 → 浮点误差导致最后一片被截断

正确写法：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const uploadId = crypto.randomUUID(); // 或 uuidv4()
const chunkSize = 5 * 1024 * 1024;
for (let i = 0; i * chunkSize < file.size; i++) {
  const start = i * chunkSize;
  const end = Math.min(start + chunkSize, file.size);
  const chunk = file.slice(start, end);
  // 传 chunkIndex: i（从 0 开始）
}

HTML 结构只需承载选择与触发，别掺和逻辑

表单标签本身不参与分片逻辑，它的作用仅限于提供入口、绑定事件、展示状态。过度嵌套或加多余属性反而干扰 JS 控制。

推荐最小结构：

<input type="file" id="fileInput" accept="video/*" multiple>
<button id="uploadBtn">开始上传</button>
<div id="progress"></div>

注意点：

• 不要给 <input> 设 name 属性——你不用它走表单提交
• 不要包裹在 <form> 里，除非你同时保留整文件回退方案
• accept 属性可辅助前端过滤，但不可替代后端校验
• 多个文件共存时，uploadId 必须 per-file 隔离

持久化关键在服务端暂存与元数据对齐

前端只管发，成败取决于服务端能否正确识别、暂存、合并、清理。前端上传的 uploadId 和 chunkIndex 必须和服务端临时存储路径、数据库记录严格一致。

例如，服务端应以 {uploadId}_{chunkIndex} 命名暂存文件（如 /tmp/uploads/abc123_0），合并前校验是否所有 chunkIndex 连续、总数是否等于前端传的 totalChunks。若用户中断后重试，前端需先查服务端已上传的 chunkIndex 列表，只重传缺失项。

容易被忽略的是：前端生成的 uploadId 必须在首次请求（如初始化接口）就和服务端同步并持久化，不能每次上传都新生成；否则断点续传时服务端无法关联历史分片。