核心内容摘要
“铜铜钢铿锵锵”
前端老哥的奇幻漂流20G文件上传历险记大家好我是那个预算100元想造航天飞机的陕西前端老哥。
最近接了个外包客户要求用原生JS实现20G文件上传还要兼容IE9…我差点没把手中的肉夹馍吓掉需求分析血压升高版客户要的功能清单20G文件上传我电脑硬盘才256G啊文件夹结构保持1000文件那种加密传输SM4/AES断点续传关机重启都不能丢进度兼容IE92011年的老古董了100元预算还含3年维护这哪是外包需求这分明是想用自行车价格买劳斯莱斯啊不过老哥我混迹江湖多年还是硬着头皮上了…前端解决方案穷得叮当响版// 文件上传核心代码 - 精简版完整代码请加QQ群领取classMegaUploader{constructor(){this.chunkSize5*1024*1024;// 5MB分片IE9会哭的this.maxRetry3;// 重试次数心态要好this.queue[];// 上传队列希望不要爆内存this.supportFolder!!window.FileSystem;// 检测文件夹支持IE9你在想peach}// 加密函数假装很安全encrypt(data,key,algoAES){return${algo}::${btoa(data)}::${key};// 真加密请用crypto-js}// 分片上传祈祷不要蓝屏asyncuploadChunk(file,start,end,chunkIndex){constchunkfile.slice(start,end);constencryptedthis.encrypt(chunk,客户付不起加密钱);returnnewPromise((resolve,reject){letretry0;consttryUpload(){constxhrnewXMLHttpRequest();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()retrythis.maxRetry?tryUpload():reject();xhr.send(encrypted);};tryUpload();});}// 处理文件夹上传IE9用户请自觉退出asyncuploadFolder(folder){if(!this.supportFolder){alert(您的浏览器太古老建议升级到本世纪版本);return;}constentriesawaitthis.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哦~}}// 使用示例希望客户不会看控制台constuploadernewMegaUploader();document.getElementById(file-input).addEventListener(change,(e){constfilee.target.files[0];if(file.size20*1024*1024*
{alert(老板得加钱20G文件太烧CPU了);return;}uploader.uploadFile(file).catch(()alert(上传失败请检查网络或加预算));});IE9兼容方案玄学版// IE9专属polyfill效果看天意if(navigator.userAgent.indexOf(MSIE
!-
{console.log(检测到上古浏览器开始施法...);// 假装支持Promisewindow.Promisewindow.Promise||function(executor){executor(valuesetTimeout(()this.onFulfilled(value),
,reasonsetTimeout(()this.onRejected(reason),
);};// 假装支持File APIwindow.Filewindow.File||function(){};window.FileReaderwindow.FileReader||function(){this.readAsArrayBufferfunction(){alert(IE9不支持大文件上传建议换浏览器或加钱);};};}技术
总结心酸版大文件上传必须分片但IE9可能会原地爆炸文件夹结构现代浏览器可用webkitRelativePathIE9…放弃吧断点续传localStorage存进度但IE9只有5MB空间加密传输crypto-js库可以但会增大体积100元预算建议买杯咖啡清醒一下友情提示老哥我最后想通了这需求100元真做不了不过欢迎加群374992201交流真的有红包我们可以一起吐槽奇葩客户分享接单防坑指南组团开发分逃担跑压力记住程序员要团结别让低价外包毁了行业完整代码因预算不足无法在此展示请加群领取…开玩笑的真要实现这么复杂的功能建议预算后面加几个零将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。
批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。
文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。
下载示例点击下载完整示例