HTML5中用Web Worker计算文件分片MD5的核心是剥离主线程耗时运算，通过slice+readAsArrayBuffer按需读取、SparkMD5高效哈希、postMessage通信及并发控制实现安全高效校验，哈希完成后再上传并支持断点续传。
在HTML5中用Web Worker实时计算文件分片的MD5哈希值，核心是把耗时的哈希运算从主线程剥离，避免阻塞UI，同时确保分片数据能安全、高效地传入Worker并返回结果。关键在于合理切分、流式读取、使用成熟哈希库（如SparkMD5）和正确的通信机制。
准备可复用的MD5 Worker脚本
新建一个独立JS文件（如md5-worker.js），在里面初始化SparkMD5，并监听主线程发来的分片ArrayBuffer：
- 引入SparkMD5（需提前下载spark-md5.min.js并用importScripts加载）
- 监听message事件，对传入的
data（ArrayBuffer）调用SparkMD5.ArrayBuffer.hash()或流式追加（适合大分片） - 计算完成后用
postMessage({id: 分片ID, hash: 结果})回传，带上唯一标识便于主线程匹配
主线程中创建Worker并分片读取文件
使用File.slice()按固定大小（如2MB）切分文件，对每个分片用FileReader.readAsArrayBuffer()读取：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每个分片读取完成（
onload）后，将e.target.result（即ArrayBuffer）通过worker.postMessage({id: i, data: buffer})发送给Worker - 为避免Worker排队阻塞，可限制并发数（如最多3个分片同时计算），用Promise.all或队列控制
- 监听Worker的
onmessage，根据id更新对应分片的哈希状态
优化性能与内存的关键细节
大文件分片上传时，不恰当的处理容易OOM或卡顿：
- 不要一次性读取整个文件——始终用
slice()+readAsArrayBuffer()按需加载 - Worker内优先用
SparkMD5.ArrayBuffer.hash(buffer, {raw: true})直接计算，比流式add更轻量（除非分片极大需分块） - 主线程收到哈希后立即释放ArrayBuffer引用（
buffer = null），帮助GC回收内存 - Worker实例建议复用（创建一次，多次postMessage），而非每分片新建
整合上传逻辑：哈希完成后再发起HTTP请求
每个分片的MD5是校验和上传的前提，因此需等待所有分片哈希返回才开始上传：
- 用Map或数组缓存各分片的哈希值，当数量达标时触发上传队列
- 上传时在请求头或请求体中带上该分片的MD5（如
X-Part-MD5），服务端可做一致性校验 - 支持断点续传：前端记录已成功上传且校验通过的分片ID，跳过重复计算和上传
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
