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

分片上传不能用

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

原生 <form></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) 算总片数 → 浮点误差导致最后一片被截断

正确写法：

const uploadId = crypto.randomUUID(); // 或 uuidv4()
const chunkSize = 5 * 1024 * 1024;
for (let i = 0; i * chunkSize <h3>HTML 结构只需承载选择与触发，别掺和逻辑</h3><p>表单标签本身不参与分片逻辑，它的作用仅限于提供入口、绑定事件、展示状态。过度嵌套或加多余属性反而干扰 JS 控制。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
														src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
													<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p>推荐最小结构：</p><pre class="brush:php;toolbar:false;"><input type="file" id="fileInput" accept="video/*" multiple><button id="uploadBtn">开始上传</button>
<div id="progress"></div>

注意点：

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

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

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

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！