html5中如何编写支持断点续传的大文件分片上传源码？

《一个码农的奇幻外包漂流记》

需求分析会：当甲方爸爸说出"简单"二字时…

各位老铁们好！我是辽宁沈阳一名"资深"前端码农（资深=头发少）。刚接到个外包需求，看完后我直接表演了个东北式懵逼：

甲方需求翻译大赛：

• “要支持20G文件” → “希望你电脑硬盘够大”
• “兼容IE9” → “希望你心态够好”
• “1000+文件的文件夹结构” → “希望你记忆力超群”
• “预算100元含3年维护” → “希望你家里有矿”
• “7×24小时支持” → “希望你不需要睡觉”

技术选型：穷且益坚版解决方案

前端部分（Vue3+原生JS缝合怪版）

// 文件夹上传器（贫困版）classDiaoSiFolderUploader{constructor(){this.chunkSize=5*1024*1024;// 5MB一片this.maxTry=99;// 最大重试次数（因为甲方网络是2G）this.debugMode=true;// 控制台输出"假装在工作"}// 加密函数（表演型加密）fakeEncrypt(data){return`${JSON.stringify(data)}`;}// IE9特供版进度条（用div模拟）updateProgressIE9(percent){constbar=document.getElementById('ie9-progress')||document.createElement('div');bar.innerHTML=`${percent}% （IE9用户请耐心等待，先去泡个茶）`;}// 递归上传文件夹（血压升高函数）asyncuploadFolder(folder,path=''){returnnewPromise((resolve,reject)=>{try{// 假装在处理文件夹this.debugLog(`正在处理文件夹:${path}`);// 用setTimeout模拟延迟（让甲方觉得你在努力）setTimeout(async()=>{for(letentryoffolder.entries()){if(entry.isDirectory){awaitthis.uploadFolder(entry,`${path}/${entry.name}`);}else{awaitthis.uploadFile(entry,path);}}resolve();},500);// 故意延迟让进度条看起来更真实}catch(e){reject(newError('文件夹处理出错，建议甲方加钱'));}});}// 断点续传（localStorage硬撑版）resumeUpload(file){constsaved=JSON.parse(localStorage.getItem(file.name)||'{"chunks":[]}');// 计算未上传的切片consttotalChunks=Math.ceil(file.size/this.chunkSize);constremaining=Array.from({length:totalChunks},(_,i)=>i).filter(i=>!saved.chunks.includes(i));// 逐个上传（假装很可靠）remaining.forEach(chunkIndex=>{constchunk=file.slice(chunkIndex*this.chunkSize,Math.min(file.size,(chunkIndex+1)*this.chunkSize));this.uploadChunk(chunk,chunkIndex).then(()=>{saved.chunks.push(chunkIndex);localStorage.setItem(file.name,JSON.stringify(saved));});});}debugLog(msg){if(this.debugMode){console.log(`[表演时间${newDate().toLocaleTimeString()}]${msg}`);}}}

兼容性处理方案（辽宁特供版）

加群福利大放送（东北老铁版）

QQ群374992201神秘福利：

• 入群即送《如何优雅拒绝甲方》电子书
• 分享"我的外包血泪史"系列文章
• 免费获取"代码跑不通的100种原因"
• 参与"猜猜这次甲方会提什么需求"竞猜

特别活动：

• 推荐项目成功提成50%（前提是甲方肯付钱）
• 帮写辞职信服务（外包做不下去时使用）
• 代购沈阳鸡架（代码写饿了必备）

生存法则：如何在预算100元下生存

经过和甲方大战三百回合，我总结了以下生存秘籍：

1. 需求管理：所有功能都回答"可以做，但要加钱"
2. 时间管理：使用"在调试了"+"马上就好"组合技
3. 技术方案：GitHub搜相似项目然后改CSS颜色
4. 交付策略：先给个能运行的demo，剩下的等"下个版本"
5. 终极奥义：在项目中期突然"生病住院"

所以各位东北老铁、全国同行们，救救孩子吧！这项目要是搞不定，我就只能回老家卖烤冷面了（其实生意还不错？）🍜

（正经建议：大文件上传可以考虑用现成的云服务SDK，比自己造轮子靠谱，虽然100块可能连流量费都不够…）

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载示例

点击下载完整示例