主 题
工具箱精选 · 1/3
在线体验：/tool/upload-slice · 总览见自文档《工具箱与其它页面》
解决什么问题
浏览器直传几十 MB～上 GB 的文件，单请求易超时、失败后重头再来。分片上传把文件切成固定大小块，配合服务端「已传块列表」做断点续传，并在 Worker 里算整文件哈希，避免卡死主线程。
功能清单
- 选择本地文件 → Worker 切片（默认约 2MB）+ 整文件 MD5
checkFile：按 hash 查是否已存在、已传哪些 index- 最多 3 路并发上传剩余分片；失败有限次重试；可暂停
- 全部分片齐后
merge合成最终文件
技术实现
前端
| 文件 | 职责 |
|---|---|
pages/tool/upload-slice/index.vue |
UI、并发队列、进度条 |
utils/upload-slice-client.ts |
Worker 客户端 |
workers/upload-slice.worker.ts |
Vite module worker + hash-wasm |
public/js/workers/upload-slice-worker.js |
回退 SparkMD5 |
优先 WASM MD5；失败自动回退经典 Worker，保证工具页可用。hash 只作续传目录键，与服务端约定兼容。
后端
api/tool.ts：
| API | 作用 |
|---|---|
POST /file/uploadBigFile |
上传单片（query: hash、index） |
GET /file/uploadBigFile/checkFile |
是否存在 / 已传 chunks |
POST /file/uploadBigFile/merge |
合并 |
使用教程
- 打开 /tool/upload-slice
- 选择大文件，等待切片与哈希（loading 点）
- 观察进度条；可点图标暂停/继续
- 完成后提示上传成功（已存在则提示勿重复传）
优化记录
- v1：主线程 SparkMD5，大文件会卡 UI
- v2：Worker + 可选 WASM；并发 3；checkFile 过滤已传 index
小结
适合当「前后端协作」样板：纯前端算 hash/切片，服务端管落盘与合并。相关说明还可看 blog-home-nuxt/api/upload-media.md。
全部评论(0)