常见 OOM 症状： 预先将所有分块转成 ArrayBuffer 并缓存在数组中，会瞬间占满内存：

​// ❌ 错误写法——极易 OOM const buffers:ArrayBuffer=;for{ buffers.push.arrayBuffer);}

推荐做法的观点是。仅在需要时读取当前块，接下来立刻交给 GC 回收。

. 文件哈希

. 主线程增量哈希（可用，但 GB 级会卡顿)

import SparkMD5 from 'spark-md5';

async function getFileMd5MainThread( file :file,signal?​ AbortSignal ):Promise{ const spark=new SparkMD5.ArrayBuffer;const parts=buildFileParts;不过，for{ ifbreak;const buf=await part.chunk.arrayBuffer;// 峰值≈一个分块大小 spark.append;// 同步 CPU，主线程短暂卡顿 } return spark.end;}

. 改版：丢进 Web Worker

至于流程图，

// md5.worker.ts import SparkMD5 from 'spark-md5';const CHUNK=510241024;

self.onmessage=async=>{ const{file,requestId}=e.data;老实说，const spark=new SparkMD5.ArrayBuffer;

for{ const blob=file.slice;const buf=await blob.arrayBuffer;spark.append;self.postMessage({ 说到type，'progress',requestId。transmitted=Math.min,total:file.size });} self.postMessage});}，

// 主线程调度 export function getFileMd5( 从file来看。file,signal，​AbortSignal,onProgress?:=>void ):Promise{ return new Promise=>{ const worker=new Worker,{type:'module'});const requestId=crypto.randomUUID;

const abortHandler==>{worker.terminate;reject)，};signal，.addEventListener;

worker.onmessage=e=>{ ifreturn;if{ onProgress?.，return; } if{ signal?.removeEventListener;worker.terminate;resolve，} };worker.onerror=e=>{worker.terminate;reject，};老实说，worker.postMessage;})，}

Worker 能让 UI 保持响应，但 **墙钟时间** 并不会显著缩短；说起来，如果想进一步调整。可只把 `append` 放到 Worker，而保持读取在主线程。

. 抽样指纹

async function sampleFingerprint:Promise{ const head=10241024;// 前 1 MB const tail=10241024;// 后 1 MB const midSize=256*1024;// 每段抽样大小 const mids=3;// 抽取几段中间

const spark=new SparkMD5.ArrayBuffer;不过，const slices:=;

for{ const start=Math.floor/);slices.push);}

if{ slices.push));}

// 加入 size 防止冲突 spark.append.encode).buffer);

for{ spark.append);} return spark.end;}

. 状态持久化· IndexedDB

问题描述： 页面被程序回收或使用者切换标签页后JS 堆被清空。若只保存在内存中的 `multipartId` 丢失，就只能重新选文件并从头开始上传——这在大文件场景下几乎不可接受。

. 原则

• 只持久化 **续传票据**。
• **不** 存整份 `File/Blob` —— 浏览器关闭后句柄失效。

. 草稿模型 + Store 示例

interface UploadTaskDraft{ draftId:string；multipartId，:string；fileI d，:string；phase:'uploading'|'done'|'failed';fileName:string；说起来，fileSize:number；其实，lastModified:number；sampleFingerprint?:string，话说回来，transmitted:number；updatedAt:number；} // UploadDraftStore.ts import localForage from 'localforage';const DRAFT_TTL_MS =7*24*60*60*1000;//7 天 export class UploadDraftStore{ 至于#store，any;constructor{ this.#store=localForage.createInstance({ 说到driver。name:'uploadDraftDB',storeName:`upload_draft-${userKey}`,version:1 });} async save{await this.#store.setItem});} async patch{ const prev=await this.#store.getItem;ifreturn undefined;const next={...prev,...partial。draftI d:draftI d,updatedAt Date.now};await this.#store.setItem;return next，} async get{return )?，undefined;} async listIncomplete{ const now=Date.now;const out=，for){ const d=await this.#store.getItem;ifcontinue，if{ await this.#store.removeItem;其实，continue，} out.push;} return out.sort=>b.updatedAt-a.updatedAt);老实说，} async remove{await this.#store.removeItem;} async flush{try{await this.save;怎么说呢，}catch{console.warn;}} }

. 写入时机示例

时机	调用
任务创建	save
multipart Init 成功	patch
分片进度	patch
Complete	remove 或标记 done
失败/取消	remove 或标记 failed
pagehide / visibilitychange	flush

const store=new UploadDraftStore;const draftID=crypto.randomUUID;// 创建任务 await store.save({ draftID,phase:'uploading',fileName:file.name。fileSize:file.size,lastModified:file.lastModified,transmitted:0});// Init 成功后立即落盘 const {multipartID}=await initMultipart;其实，await store.patch;// 节流写入进度 let lastWritten=0,lastFlushTime=0;function onPartProgress{ const now=Date.now;ifreturn，lastWritten=loaded;lastFlushTime=now;store.patch，} // 完成或取消后清理草稿 await store.remove;// 页面隐藏/关闭时强制落盘一次防止丢失 document.addEventListener=>{if{store.flush;}})，window.addEventListener=>{store.flush;})，

. 恢复流程 + 示例代码

graph TD Open --> Load Load --> List List --> Bind{使用者重选同一文件} Bind -->|是| Match Match --> Resume Bind -->|否| Keep function assertSameFile{ ifthrow new Error;ifthrow new Error;ifthrow new Error;// 可选进一步比对抽样指纹： // if!==draft.sampleFingerprint)throw new Error;怎么说呢，} async function continueUpload{ const draft=await store.get;老实说，ifthrow new Error;assertSameFile;const fileID=await resumeMultipart;await store.remove;return fileID;怎么说呢，} // 页面加载时： const drafts = await store.listIncomplete;// UI 展示 drafts。让使用者点击「继续」并重新选择对应文件后调用 continueUpload

主要 只落盘 **票据**，而不是整个 `File` 对象；使用者重新选同一份文件后即可通过这些票据完成断点续传。

. 多文件并发控制

const MAX_PARALLEL = 3;不过，// 同时最多上传 N 个大文件 class UploadQueue{ #running = 0;#waiting:Array<=>Promise=;enqueue{ this.#waiting.push;this.#pump，} async #pump{ while{ const task=this.#waiting.shift!，话说回来，this.#running++;task .catch .finally=>{this.#running--;this.#pump，});} } } // 使用示例： const queue=new UploadQueue;for{ queue.enqueue=>uploadFileToServer);}
• 一个 **File** 即为一个独立的上传任务。
• 最多同时激活 **N** 个任务。其余进入排队，以防止浏览器连接数被耗尽。
• 每个任务内部仍采用串行分片方式。不会出现同一文件同时发送多个分片，从而保持带宽利用率和进度可控性。

. 小结

1. 小于阈值走单次 FormData 大于阈值走 Multipart 分片；保证 **不卡 UI** 且 **不 OOM**。
2. 提供的是“视图”，不会把整块数据读入堆；切忌一次性预物化所有分块导致 OOM。
3. 全量哈希建议放在 Web Worker 中执行；抽样指纹适用于秒传 L1 场景，可显著降低网络开销。话说回来，
4. 页面被程序回收或关闭时仅将 **续传票据** 写入 IndexedDB；恢复时重新绑定同一 File，即可无缝续传。
5. 通过 UploadQueue 控制多文件并发数量，防止连接数饱和导致整体速度下降。其实，