一个准毕业码农的史诗级文件管理系统开发日记各位码友大家好我就是那个被10G大文件折磨得死去活来的山西大三狗血泪开发史“老师我这个文件管理系统能传10G文件” —— 这话说出来我自己都不信毕竟我的笔记本硬盘总共才256G…前端技术选型心路历程“原生JSVue3这不是前后矛盾吗” —— 我的导师看到我的技术栈时露出了关爱智障的眼神。但我要证明这是可以实现的// 大文件分片上传核心代码片段纯手工打造童叟无欺constMAX_CHUNK_SIZE5*1024*1024;// 5MB一片别问为什么问就是IE8会哭functionsplitFile(file){letchunks[];letstart0;while(startfile.size){letendMath.min(startMAX_CHUNK_SIZE,file.size);chunks.push({chunk:file.slice(start,end),index:chunks.length,total:Math.ceil(file.size/MAX_CHUNK_SIZE),fileName:file.name,fileSize:file.size});startend;}returnchunks;}// 断点续传黑科技localStorageIndexedDB双备份functionsaveProgress(fileMd5,chunkIndex){try{localStorage.setItem(upload_${fileMd5},chunkIndex);// 这里应该还有IndexedDB的代码但是...我还没学会...}catch(e){console.log(您的存储空间已爆炸);}}浏览器兼容性炼狱“IE8Win7国产浏览器” —— 当我看到需求文档时我以为回到了2010年…// 检测浏览器是否支持File API给IE8老爷爷准备的轮椅functioncheckBrowserSupport(){if(!window.File||!window.FileReader||!window.FileList||!window.Blob){alert(您的浏览器太老了建议升级到IE9...等等IE9也很老啊);returnfalse;}returntrue;}// 文件夹上传的魔术代码其实也没那么神奇functionhandleFolderUpload(event){letfilesevent.target.files;letentries[];// 这个webkitRelativePath是文件夹上传的关键for(leti0;ifiles.length;i){letfilefiles[i];if(file.webkitRelativePath){entries.push({path:file.webkitRelativePath,file:file});}}returnentries;}开发路上那些坑断点续传的离线存储我天真地以为localStorage就够用了直到遇到了10G文件…现在正在恶补IndexedDB文件夹层级保留webkitRelativePath这个属性名字看起来就像是个临时工写的但它确实是唯一能用的方案加密传输本来是准备用AES的后来发现IE8不支持现在正在研究如何用RSADES组合拳求带飞环节“有没有师傅愿意收留我这个迷途的羔羊后端代码还是一片空白啊PythonJavaPHP我都可以学” 前端完整实现思路伪代码版classMegaUploader{constructor(){this.chunks[];this.uploaded0;this.fileMd5;this.resumeDatathis.loadResumeData();}// 大文件MD5计算分片计算避免卡死calculateFileMd5(file){returnnewPromise((resolve){// 这里应该有很复杂的计算逻辑...setTimeout(()resolve(mock_md5_file.name),500);});}// 断点续传数据加载loadResumeData(){// 先从localStorage尝试// 失败后尝试IndexedDB// 再失败...那就从头开始吧return{};}// 真正的上传逻辑asyncupload(file){this.fileMd5awaitthis.calculateFileMd5(file);this.chunkssplitFile(file);// 检查服务器哪些分片已经上传letuploadedChunksawaitcheckServerProgress(this.fileMd5);// 只上传未完成的部分for(leti0;ithis.chunks.length;i){if(!uploadedChunks.includes(i)){awaitthis.uploadChunk(this.chunks[i]);saveProgress(this.fileMd5,i);}}// 所有分片完成通知服务器合并awaitnotifyServerMerge(this.fileMd5,file.name);}// 上传单个分片uploadChunk(chunk){returnnewPromise((resolve,reject){letformDatanewFormData();formData.append(file,chunk.chunk);formData.append(chunkIndex,chunk.index);formData.append(totalChunks,chunk.total);formData.append(fileMd5,this.fileMd5);// 这里应该有加密逻辑...fetch(/upload,{method:POST,body:formData}).then(response{if(response.ok){this.uploaded;resolve();}else{reject(上传失败);}});});}}致未来的雇主大大“虽然我现在连个完整的后端都写不出来但我前端已经能画出漂亮的进度条了” PS那个QQ群是真的红包也是真的虽然最大那个99元的红包可能已经被我领走了…将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例