《一个预算100元的前端老哥自白》各位老铁好啊我是一名甘肃前端老兵最近接了个惊天地泣鬼神的外包需求100元预算要搞出价值10万的项目功能这波操作简直比用算盘开发AI还刺激一、需求理解100元买劳斯莱斯客户想要的功能清单20G文件上传我家路由器看到这需求直接自闭了IE9兼容这要求比我爷爷的老年机跑《原神》还难保留文件夹结构1000个文件的目录树我家族谱都没这么复杂断点续传关了浏览器还得记住进度这功能该叫程序员记忆面包加密传输SM4AES双加密我支付宝都没这待遇3年免费维护100元买我三年青春二、技术方案用情怀发电核心代码展示IE9特别魔改版// 文件夹上传处理高血压警告functionhandleFolderUpload(event){// IE9特殊处理if(navigator.userAgent.indexOf(MSIE 9)-1){alert(检测到史前浏览器建议升级到21世纪);returnPromise.reject(建议客户把这台电脑送进博物馆);}constfilesevent.target.files;constfolderPromises[];// 递归处理文件夹functionprocessEntry(entry,path){returnnewPromise((resolve){if(entry.isFile){entry.file(file{// 假装这里有很多处理代码console.log(处理文件${path}/${file.name});resolve();});}elseif(entry.isDirectory){constdirReaderentry.createReader();dirReader.readEntries(entries{constpromisesentries.map(childEntryprocessEntry(childEntry,${path}/${entry.name}));Promise.all(promises).then(resolve);});}});}// 遍历文件项for(leti0;ifiles.length;i){constentryfiles[i].webkitGetAsEntry();if(entry){folderPromises.push(processEntry(entry));}}returnPromise.all(folderPromises).then(()alert(文件夹上传成功也许)).catch(errconsole.error(上传失败,err));}文件分片上传梦想版// 文件分片处理伪代码functionuploadFileInChunks(file){constCHUNK_SIZE5*1024*1024;// 5MBconstchunksMath.ceil(file.size/CHUNK_SIZE);letuploaded0;// 检查本地存储的进度constsavedProgresslocalStorage.getItem(upload_${file.name});if(savedProgress){uploadedparseInt(savedProgress);console.log(从上次中断的第${uploaded}块继续);}functionuploadChunk(chunkNum){conststartchunkNum*CHUNK_SIZE;constendMath.min(file.size,startCHUNK_SIZE);constchunkfile.slice(start,end);// 这里应该是AJAX请求console.log(上传第${chunkNum1}/${chunks}块);// 模拟上传延迟setTimeout((){localStorage.setItem(upload_${file.name},chunkNum1);if(chunkNumchunks-1){uploadChunk(chunkNum1);}else{console.log(上传完成);localStorage.removeItem(upload_${file.name});}},500);}uploadChunk(uploaded);}加密传输玄学版// 假装这是SM4加密实际请使用正规库functionfakeSM4Encrypt(data){console.warn(预算不足使用灵魂加密法);returnbtoa(unescape(encodeURIComponent(data))).split().reverse().join();}三、IE9兼容方案劝退版四、实用建议关于预算100元连VSCode主题都买不起建议报价加两个零关于IE9直接告诉客户兼容IE9的代价是买新电脑的10倍关于20G文件先问问客户服务器硬盘是不是用天河一号关于3年维护建议改成3天内可以发微信咨询五、文件夹结构保持技巧// 文件树结构示例constfileTree{name:root,type:directory,children:[{name:documents,type:directory,children:[{name:resume.doc,type:file,size:1024},{name:photo.jpg,type:file,size:2048}]},{name:README.txt,type:file,size:512}]};六、QQ群真相调查“加群送红包”进群后发现红包是0.01元分100份“50%提成”原来是项目亏损的50%“比打工强”确实毕竟打工还发工资呢七、生存指南需求评审把支持IE9改成额外收费项目进度管理告诉客户100元只够写README文件技术选型多用console.log调试毕竟debugger要加钱职业规划已经开始看美团骑手招募广告最后的呐喊老哥们那个QQ群广告才是重点对吧这波拉人头的操作比你的前端代码6多了战术后仰将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例