表单提交进度条不显示或为0%需改用javascript控制流程，依赖xmlhttprequest.upload.onprogress；确保content-length可预估、正确计算value值并处理total为0的情况；断点续传需服务端配合。
表单提交时进度条不显示或始终为0%？先确认是否用了 XMLHttpRequest 或 fetch
原生 <form></form> 直接提交（submit 事件 + action）会触发整页跳转，根本没机会更新进度条。必须改用 JavaScript 控制提交流程，底层依赖 XMLHttpRequest 的 upload.onprogress，或者 fetch + ReadableStream（但后者不支持上传进度）。所以第一步：别用 form.submit()，改用 XMLHttpRequest 或封装好的 fetch 替代方案（如 axios）。
XMLHttpRequest.upload.onprogress 拿不到 total？检查 Content-Length 是否可预估
进度计算依赖 event.loaded 和 event.total。但 event.total 在某些场景下为 0 —— 常见于：FormData 包含大文件且未显式设置 Content-Length，或后端未返回完整响应头。解决办法：
-
FormData提交前，手动计算文件大小总和（file.size），作为进度条最大值参考 - 确保表单不包含
<input type="file">多选后又删除部分项，否则FormData.entries()遍历时可能漏算 - 避免在
onprogress中频繁操作 DOM；用requestAnimationFrame节流更新<progress></progress>的value属性
使用
<progress></progress> 的 value 是数值，不是百分比，但它的语义范围默认是 0 到 1（若设 max="100"，才对应 0–100）。常见错误写法：progressEl.value = e.loaded / e.total（结果是 0.32，但 max 是 100，显示就卡在 0）。正确做法：
- 保持
<progress max="100"></progress> - 更新时用
Math.round((e.loaded / e.total) * 100)，再赋给value - 当
e.total === 0（如分块上传未告知总长），改用「不确定进度」模式：progressEl.removeAttribute('value')
大文件上传中途刷新页面？进度状态无法恢复，得靠服务端配合
浏览器原生上传没有断点续传能力。如果用户刷新页面，XMLHttpRequest 实例销毁，前端进度归零，但服务端可能已接收部分数据。真正可行的方案是：
- 前端上传前先发请求向服务端申请一个
uploadId - 每个分片带上
uploadId和chunkIndex，服务端记录已收分片 - 刷新后，前端用
uploadId查询已传进度，跳过已成功分片 - 纯前端无法绕过这个限制 —— 不管用
XMLHttpRequest还是axios，都只是控制当前请求生命周期
进度条能显示的，只是当前这次请求的上传进展。上传是否可靠、能否中断续传，不在 DOM 或 JS 控制范围内，得看后端接口设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
