前端如何通过HTML实现100万文件上传的批量处理？

前端老哥的奇幻漂流：20G文件上传历险记

大家好，我是那个"预算100元想造航天飞机"的陕西前端老哥。最近接了个外包，客户要求用原生JS实现20G文件上传，还要兼容IE9…我差点没把手中的肉夹馍吓掉！

需求分析（血压升高版）

客户要的功能清单：

• 20G文件上传（我电脑硬盘才256G啊！）
• 文件夹结构保持（1000+文件那种）
• 加密传输（SM4/AES）
• 断点续传（关机重启都不能丢进度）
• 兼容IE9（2011年的老古董了）
• 100元预算（还含3年维护）

这哪是外包需求，这分明是想用自行车价格买劳斯莱斯啊！不过老哥我混迹江湖多年，还是硬着头皮上了…

前端解决方案（穷得叮当响版）

// 文件上传核心代码 - 精简版（完整代码请加QQ群领取）classMegaUploader{constructor(){this.chunkSize=5*1024*1024;// 5MB分片（IE9会哭的）this.maxRetry=3;// 重试次数（心态要好）this.queue=[];// 上传队列（希望不要爆内存）this.supportFolder=!!window.FileSystem;// 检测文件夹支持（IE9：你在想peach）}// 加密函数（假装很安全）encrypt(data,key,algo='AES'){return`${algo}::${btoa(data)}::${key}`;// 真加密请用crypto-js}// 分片上传（祈祷不要蓝屏）asyncuploadChunk(file,start,end,chunkIndex){constchunk=file.slice(start,end);constencrypted=this.encrypt(chunk,'客户付不起加密钱');returnnewPromise((resolve,reject)=>{letretry=0;consttryUpload=()=>{constxhr=newXMLHttpRequest();xhr.open('POST','/upload',true);xhr.setRequestHeader('Content-Type','application/octet-stream');xhr.setRequestHeader('X-Chunk-Index',chunkIndex);xhr.onload=()=>resolve(xhr.response);xhr.onerror=()=>++retry<this.maxRetry?tryUpload():reject();xhr.send(encrypted);};tryUpload();});}// 处理文件夹上传（IE9用户请自觉退出）asyncuploadFolder(folder){if(!this.supportFolder){alert('您的浏览器太古老，建议升级到本世纪版本');return;}constentries=awaitthis.readDirectory(folder);for(constentryofentries){if(entry.isFile){awaitthis.uploadFile(awaitentry.getFile());}elseif(entry.isDirectory){awaitthis.uploadFolder(entry);}}}// 断点续传（全靠localStorage死撑）saveProgress(fileId,progress){localStorage.setItem(`upload_${fileId}`,JSON.stringify(progress));// 注意：IE9的localStorage只有5MB哦~}}// 使用示例（希望客户不会看控制台）constuploader=newMegaUploader();document.getElementById('file-input').addEventListener('change',(e)=>{constfile=e.target.files[0];if(file.size>20*1024*1024*1024){alert('老板，得加钱！20G文件太烧CPU了');return;}uploader.uploadFile(file).catch(()=>alert('上传失败，请检查网络或加预算'));});

IE9兼容方案（玄学版）

// IE9专属polyfill（效果看天意）if(navigator.userAgent.indexOf('MSIE 9')!==-1){console.log('检测到上古浏览器，开始施法...');// 假装支持Promisewindow.Promise=window.Promise||function(executor){executor(value=>setTimeout(()=>this.onFulfilled(value),0),reason=>setTimeout(()=>this.onRejected(reason),0));};// 假装支持File APIwindow.File=window.File||function(){};window.FileReader=window.FileReader||function(){this.readAsArrayBuffer=function(){alert('IE9不支持大文件上传，建议换浏览器或加钱');};};}

技术总结（心酸版）

1. 大文件上传：必须分片，但IE9可能会原地爆炸
2. 文件夹结构：现代浏览器可用webkitRelativePath，IE9…放弃吧
3. 断点续传：localStorage存进度，但IE9只有5MB空间
4. 加密传输：crypto-js库可以，但会增大体积
5. 100元预算：建议买杯咖啡清醒一下

友情提示

老哥我最后想通了：这需求100元真做不了！不过欢迎加群374992201交流（真的有红包），我们可以：

• 一起吐槽奇葩客户
• 分享接单防坑指南
• 组团开发分（逃）担（跑）压力

记住：程序员要团结，别让低价外包毁了行业！💪

（完整代码因"预算不足"无法在此展示，请加群领取…开玩笑的，真要实现这么复杂的功能，建议预算后面加几个零）

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

文件下载支持离线保存进度信息，刷新页面，关闭页面，重启系统均不会丢失进度信息。

文件夹下载

支持下载文件夹，并保留层级结构，不打包，不占用服务器资源。

下载示例

点击下载完整示例