因为layui.upload底层封装的是原生XMLHttpRequest表单上传，不支持分片、不暴露底层请求控制权，也未提供文件切片、进度回调、暂停/恢复等接口，其before、progress钩子仅作用于整体上传阶段，无法干预单个分片行为。
为什么直接用 layui.upload 做不了断点续传
因为 layui.upload 底层封装的是原生 XMLHttpRequest 表单上传，不支持分片、不暴露底层请求控制权，也没提供文件切片、进度回调、暂停/恢复等接口。你调用 upload.render() 时传的 before、progress 都是“整体上传阶段”的钩子，无法干预单个分片行为。
所以真要做断点续传，得绕过 layui.upload，自己用 FileReader + fetch 或 XMLHttpRequest 控制分片逻辑，再把 UI 层（进度条、按钮状态、重试）用 layui 的组件（比如 laydate 风格的弹层、layer.msg）补上。
怎么在浏览器里安全高效地算大文件的 SHA1（用于秒传）
别用纯 JS 的 sha1 库遍历整个 ArrayBuffer —— 500MB 文件会卡死主线程，用户点不动按钮。必须用 Web Worker + 流式分块计算，同时限制单次处理量防阻塞。
-
File.slice()每次取 2MB（blob.slice(start, start + 2 * 1024 * 1024)），避免内存爆掉 - 用
crypto.subtle.digest('SHA-1', buffer)替代第三方库，是 Web Crypto API 原生支持，速度快且不依赖打包体积 - Worker 里用
postMessage({type: 'progress', percent: x})主线程更新进度条，别用console.log查看 - 完整 Hash 拼接前先校验每块 digest 是否成功，有失败就中断并报错
"hash calculation interrupted"
断点续传的关键状态怎么存和恢复
服务端必须返回已上传分片列表（比如 ["001", "002", "004"]），前端不能靠本地 localStorage 自己记——文件名可能重复、用户清缓存、换设备就丢。真正可靠的状态来源只能是后端接口。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 上传前先发一次
POST /api/upload/check?fileId=xxx&size=yyy，服务端查 DB 或 Redis 返回已存在分片索引数组 - 前端对比本地分片总数，跳过已传的索引，只上传缺失分片（如总 10 片，已传 [0,1,3]，就发 2、4~9）
- 每个分片请求 header 加
X-Upload-Offset: 2097152（即该分片起始字节），服务端用它校验是否覆盖写入 - 别用
filename当fileId，要用文件内容 Hash（如 SHA1 前 16 位）+ 文件大小拼成唯一 key，防同名不同内容误判
layui UI 怎么和自定义上传逻辑联动
放弃 upload.render() 的自动绑定，改用 layui 的基础组件手动搭交互：
- 用
layui.form.on('submit(upload-btn)')拦住表单提交，触发你自己的startUpload(file) - 进度条用
layui.element.progress('upload-progress', '50%')，别手写 DOM 更新 - 上传中按钮禁用：用
btnElem.attr('disabled', true)，完成后用btnElem.removeAttr('disabled') - 失败重试用
layer.confirm('上传失败，重试？', {icon: 2}, () => { resumeUpload() })，别弹 alert - 最终合并成功后，再调一次
layui.upload.post()（仅用于通知后端合并，不传文件体）
最易被忽略的是：秒传判断必须在分片计算完成之后、上传发起之前做。很多人把秒传逻辑写在点击按钮瞬间，结果文件还没算完 Hash 就去查服务端，返回“不存在”然后走分片流程——白白浪费时间。实际顺序只能是：选文件 → 启动 Worker 算 Hash → Hash 完成 → 查秒传接口 → 根据响应决定是直接 success 还是走断点续传。
