一个 4.7 GB 视频把浏览器拖进 OOM （金石瓜分计划强势上线，速戳上图了解详情）你给一家在线教育平台做「课程视频批量上传」功能。 需求听起来很朴素：讲师后台一次性拖 20 个 4K 视频，浏览器要稳、要快、要能断网续传。 你第一版直接input type="file"+FormData，结果上线当天就炸： 讲师 A 上传 4.7 GB 的.mov，Chrome 直接「内存溢出」崩溃；讲师 B 网断了 3 分钟，重新上传发现进度条归零，心态跟着归零；运营同学疯狂 @ 前端：“你们是不是没做分片？”解决方案：三层防线，把 4 GB 切成 2 MB 的“薯片”1. 表面用法：分片 + 并发，浏览器再也不卡ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line// upload.jsconstCHUNK_SIZE=2*1024*1024; // ?? 2 MB 一片，内存友好exportasyncfunction*sliceFile(file) {letcur =0;while(cur file.size) { yieldfile.slice(cur, cur +CHUNK_SIZE); cur +=CHUNK_SIZE; }}ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line// uploader.jsimportpLimitfrom'p-limit';constlimit =pLimit(5); // ?? 最多 5 并发，防止占满带宽exportasyncfunctionupload(file) {consthash =awaitcalcHash(file); // ?? 秒传、断点续传都靠它consttasks = [];forawait(constchunkofsliceFile(file)) { tasks.push(limit(() =uploadChunk({ hash, chunk }))); }awaitPromise.all(tasks);awaitmergeChunks(hash, file.name); // ?? 通知后端合并}逐行拆解： sliceFile用file.slice生成 Blob 片段，「不占额外内存」；p-limit控制并发，避免 100 个请求同时打爆浏览器；calcHash用 WebWorker 算 MD5，页面不卡顿（后面细讲）。2. 底层机制：断点续传到底续在哪？角色存储位置内容生命周期前端IndexedDBhash → 已上传分片索引数组浏览器本地，清缓存即失效后端Redis / MySQLhash → 已接收分片索引数组可配置 TTL，支持跨端续传ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(linesequenceDiagram participant F as 前端 participantBas 后端 F-B: POST /prepare {hash, totalChunks} B--F:200OK {uploaded:[0,3,7]} loop 上传剩余分片 F-B: POST /upload {hash, index, chunkData} B--F:200OK end F-B: POST /merge {hash} B--F:200OK Note over B: 按顺序写磁盘 前端先POST /prepare带 hash + 总分片数；后端返回已上传索引[0, 3, 7]；前端跳过这 3 片，只传剩余；全部完成后POST /merge，后端按顺序写磁盘。3. 设计哲学：把“上传”做成可插拔的协议ounter(lineounter(lineounter(lineounter(lineounter(lineinterfaceUploader{prepare(file:File):PromisePrepareRespupload(chunk:Blob,index:number):Promisevoidmerge():Promisestring // ?? 返回文件 URL}我们实现了三套： BrowserUploader：纯前端分片；TusUploader：遵循 tus.io 协议，天然断点续传；AliOssUploader：直传 OSS，用 OSS 的断点 SDK。方案并发控制断点续传秒传代码量自研手动自己实现手动300 行tus内置协议级需后端100 行OSS内置SDK 级自动50 行应用扩展：拿来即用的配置片段1. WebWorker 算 Hash（防卡顿）ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line// hash.worker.jsimportScripts('spark-md5.min.js');self.onmessage=({ data: file }) ={constspark =newSparkMD5.ArrayBuffer();constreader =newFileReaderSync();for(leti =0; i file.size; i +=CHUNK_SIZE) { spark.append(reader.readAsArrayBuffer(file.slice(i, i +CHUNK_SIZE))); } self.postMessage(spark.end());};2. 环境适配环境适配点浏览器需兼容 Safari 14 以下无File.prototype.slice（用webkitSlice兜底）Node用fs.createReadStream分片，Hash 用crypto.createHash('md5')Electron渲染进程直接走浏览器方案，主进程可复用 Node 逻辑举一反三：3 个变体场景「秒传」 上传前先算 hash → 调后端/exists?hash=xxx→ 已存在直接返回 URL，0 流量完成。「加密上传」 在uploadChunk里加一层AES-GCM加密，后端存加密块，下载时由前端解密。「P2P 协同上传」 用 WebRTC 把同局域网学员的浏览器变成 CDN，分片互传后再统一上报，节省 70% 出口带宽。小结大文件上传的核心不是“传”，而是“断”。 把 4 GB 切成 2 MB 的薯片，再配上一张能续命的“进度表”，浏览器就能稳稳地吃下任何体积的视频。 AI编程资讯AI Coding专区指南： https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文