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()读取：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 每个分片读取完成（
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
