《一个码农的奇幻外包漂流记》需求分析会当甲方爸爸说出简单二字时…各位老铁们好我是辽宁沈阳一名资深前端码农资深头发少。刚接到个外包需求看完后我直接表演了个东北式懵逼甲方需求翻译大赛“要支持20G文件” → “希望你电脑硬盘够大”“兼容IE9” → “希望你心态够好”“1000文件的文件夹结构” → “希望你记忆力超群”“预算100元含3年维护” → “希望你家里有矿”“7×24小时支持” → “希望你不需要睡觉”技术选型穷且益坚版解决方案前端部分Vue3原生JS缝合怪版// 文件夹上传器贫困版classDiaoSiFolderUploader{constructor(){this.chunkSize5*1024*1024;// 5MB一片this.maxTry99;// 最大重试次数因为甲方网络是2Gthis.debugModetrue;// 控制台输出假装在工作}// 加密函数表演型加密fakeEncrypt(data){return${JSON.stringify(data)};}// IE9特供版进度条用div模拟updateProgressIE9(percent){constbardocument.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){constsavedJSON.parse(localStorage.getItem(file.name)||{chunks:[]});// 计算未上传的切片consttotalChunksMath.ceil(file.size/this.chunkSize);constremainingArray.from({length:totalChunks},(_,i)i).filter(i!saved.chunks.includes(i));// 逐个上传假装很可靠remaining.forEach(chunkIndex{constchunkfile.slice(chunkIndex*this.chunkSize,Math.min(file.size,(chunkIndex1)*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});}}}兼容性处理方案辽宁特供版浏览器应对策略心理承受力IE9加入检测代码自动弹出升级浏览器弹窗已经看开Windows 7老机器降级使用jQuery别问为什么心如止水20G文件上传显示正在压缩然后偷偷降低画质良心不存在的100元预算在代码里加入甲方专属彩蛋创意无价加群福利大放送东北老铁版QQ群374992201神秘福利入群即送《如何优雅拒绝甲方》电子书分享我的外包血泪史系列文章免费获取代码跑不通的100种原因参与猜猜这次甲方会提什么需求竞猜特别活动推荐项目成功提成50%前提是甲方肯付钱帮写辞职信服务外包做不下去时使用代购沈阳鸡架代码写饿了必备生存法则如何在预算100元下生存经过和甲方大战三百回合我总结了以下生存秘籍需求管理所有功能都回答可以做但要加钱时间管理使用在调试了马上就好组合技技术方案GitHub搜相似项目然后改CSS颜色交付策略先给个能运行的demo剩下的等下个版本终极奥义在项目中期突然生病住院所以各位东北老铁、全国同行们救救孩子吧这项目要是搞不定我就只能回老家卖烤冷面了其实生意还不错正经建议大文件上传可以考虑用现成的云服务SDK比自己造轮子靠谱虽然100块可能连流量费都不够…将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例