核心内容摘要
Postman的几种请求方式
震惊100元预算要求开发企业级大文件上传系统各位前端大佬们好呀(双手合
我是一名挣扎在温饱线的浙江前端码农最近接了个史诗级项目——20G大文件上传系统预算高达100元这让我感动得热泪盈眶毕竟现在连煎饼果子都要10块一个了…客户需求清单(比我的购物车还长)20G文件上传比我前女友分手时发的长文还大文件夹保持层级客户文件夹结构比我家族谱还复杂IE9兼容这浏览器比我奶奶的老花镜岁数还大加密要求SM4/AES比我藏私房钱的方式还安全断点续传要求比我的减肥计划还持久免费服务3年维护7×24支持比中国移动客服还贴心前端技术选型(泪流满面版)// 选择器在100元预算下我只能选择最省钱的方式consttechStack{framework:原生JS,// 因为vue要钱(误)UI:纯CSS,// 没钱买组件库encryption:console.log(已加密),// 安全等级肉眼加密IE9支持:祈祷,// 主要靠玄学}部分前端代码展示(真实可用版)
文件夹选择与遍历 (使用webkitRelativePath保持结构)// 获取文件夹并保持结构document.getElementById(folderPicker).addEventListener(change,function(e){constfilese.target.files;constfolderMap{};// 遍历文件并构建层级结构for(leti0;ifiles.length;i){constfilefiles[i];if(file.webkitRelativePath){constpathPartsfile.webkitRelativePath.split(/);letcurrentLevelfolderMap;// 构建文件夹树for(letj0;jpathParts.length-1;j){constpartpathParts[j];if(!currentLevel[part]){currentLevel[part]{};}currentLevelcurrentLevel[part];}// 添加文件到最底层currentLevel[pathParts[pathParts.length-1]]file;}}console.log(文件夹结构:,folderMap);// 这里应该有上传逻辑但预算不够写...});
分片上传控制 (伪断点续传版)classChunkUploader{constructor(file,options{}){this.filefile;this.chunkSizeoptions.chunkSize||5*1024*1024;// 5MBthis.chunksMath.ceil(file.size/this.chunkSize);this.currentChunk0;this.savedProgressJSON.parse(localStorage.getItem(file.name))||0;}asyncupload(){// 断点续传 - 从上次中断的地方继续for(letithis.savedProgress;ithis.chunks;i){constchunkthis.getChunk(i);// 假装这里有加密constencryptedChunkthis.fakeEncrypt(chunk);// 理论上这里要发到服务器console.log(上传分片${i1}/${this.chunks});// 保存进度(比我的存款进度保存得还认真)localStorage.setItem(this.file.name,i);this.currentChunki;}// 上传完成清理记录localStorage.removeItem(this.file.name);}getChunk(index){conststartindex*this.chunkSize;constendMath.min(startthis.chunkSize,this.file.size);returnthis.file.slice(start,end);}fakeEncrypt(data){// 预算有限只能做做样子console.log(正在用SM4加密...(假装很安全));returndata;}}
IE9兼容性处理 (痛苦面具版)// 检查是否是IE9functionisIE9(){return/*cc_on!*/false||!!document.documentModedocument.documentMode9;}// IE9特别处理if(isIE9()){console.log(检测到IE9开始执行特殊兼容代码...);document.write(温馨提示您正在使用古董浏览器建议升级);// IE9不支持File API的替代方案document.getElementById(filePicker).innerHTML IE9爷爷不支持文件夹上传将就下吧;}加入我们福利社(这才是重点)加QQ群374992201立享
元红包比项目预算高 项目合作接单 超级会员50%提成 技术交流/工作内推特别活动推荐项目赚提成2万项目你能拿1万比996香多了免责声明(正经一秒)以上代码仅供娱乐真实项目请增加真实加密逻辑完善错误处理添加进度反馈最重要的是——提高预算PS本人目前也在求职能接受加班(因为已经天天加班了)薪资要求比这个项目预算高那么一点点就行…将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。
下载示例点击下载完整示例