抱着键盘在宿舍转圈圈版各位大佬好呀我是福州某大学·网络工程·大三·刚学会console.log()的·编程小白·秃头预备役。最近被导师按头要求搞个能上传10G文件还带加密的文件夹传输系统现在每天的状态be like 前端我会Vue3️ 后端Python是啥能吃吗 数据库MySQL…是那个会游泳的乌龟吗 前端の绝地求生Vue3原生JS魔改版// 魔改WebUploader核心片段兼容IE8的降级方案classPoorManUploader{constructor(){this.chunks[];// 存储分片信息this.browserthis.detectAncientBrowser();// 检测上古浏览器this.initFileInput();// 兼容IE8的文件选择}// 浏览器探测术能识别IE6-11的玄学方法detectAncientBrowser(){constuanavigator.userAgent.toLowerCase();if(ua.indexOf(msie)-1)returnieua.match(/msie (\d)/)[1];if(ua.indexOf(trident)-1)returnie11;returnmodern;// 其他现代浏览器}// 文件夹上传核心逻辑递归遍历FileListhandleFolderUpload(event){if(this.browser.startsWith(ie)){alert(IE用户请自觉切换Chrome);return;}constfilesevent.target.files;constfileTreethis.buildFileTree(files);// 构建树形结构this.encryptTree(fileTree).then(encryptedTree{this.sliceAndUpload(encryptedTree);// 切片上传});}// 构建文件树递归算法buildFileTree(files,parentPath){consttree{};for(leti0;ifiles.length;i){constfilefiles[i];constpathfile.webkitRelativePath||file.name;// 兼容不同浏览器if(path.includes(/)){constdirspath.split(/);constfileNamedirs.pop();letcurrentDirtree;// 递归创建目录结构dirs.forEach(dir{if(!currentDir[dir])currentDir[dir]{};currentDircurrentDir[dir];});currentDir[fileName]file;// 存储文件对象}else{tree[file.name]file;// 根目录文件}}returntree;}// 魔改版分片上传带断点续传sliceAndUpload(fileNode,parentPath){constchunkSize5*1024*1024;// 5MB分片constfilefileNodeinstanceofFile?fileNode:fileNode.file;consttotalChunksMath.ceil(file.size/chunkSize);// 从localStorage恢复进度IE8兼容版constsavedProgresslocalStorage.getItem(progress_${file.name});letstartChunksavedProgress?parseInt(savedProgress):0;for(letistartChunk;itotalChunks;i){constblobfile.slice(i*chunkSize,(i1)*chunkSize);constformDatanewFormData();formData.append(file,blob);formData.append(chunkIndex,i);formData.append(totalChunks,totalChunks);formData.append(fileId,this.generateFileId(file));formData.append(parentPath,parentPath);// 保留层级结构// 使用XMLHttpRequest兼容IEconstxhrnewXMLHttpRequest();xhr.open(POST,/api/upload,true);xhr.onload(){if(xhr.status200){localStorage.setItem(progress_${file.name},i1);if(itotalChunks-1){console.log(${file.name}上传完成);// this.mergeChunks(fileNode); // 合并分片后端实现}}};xhr.send(formData);}}}// 在Vue组件中使用exportdefault{mounted(){this.uploadernewPoorManUploader();},methods:{triggerUpload(){document.getElementById(fileInput).click();}}} 生存指南血泪经验IE兼容性文件选择用的降级方案引入es5-shim和json2.js垫片放弃CSS3动画改用jQuery淡入淡出断点续传用localStorage存储进度IE8可用服务器端需要记录已上传的分片但我还不会写后端合并前校验所有分片完整性后端实现加密传输前端用CryptoJS加密但加密后文件变大怎么办后端解密后重新加密存储求大神教我Python传输使用HTTPS本地开发用自签名证书面试吹牛技巧“这个系统支持PB级文件传输”实际最多10G“采用区块链技术加密”其实就是Base64“通过量子计算优化分片算法”其实随机切的 紧急求助现在系统存在以下致命问题IE8上传超过2GB文件会崩溃求优化方案文件夹层级超过3层会丢失结构递归算法写崩了加密后的文件在Python后端无法解密求后端代码合并分片时偶尔会丢数据数据库设计不会求各位大佬加群374992201拯救现在入群可享免费获得价值998元的《如何在毕业设计里混过去》电子书参与帮学弟改BUG活动赢取奶茶基金推荐工作成功送《职场舔狗指南》纸质版突然正经PS真的求后端师傅本人擅长熬夜改前端BUG写注释骗评审PPT画大饼帮师傅买奶茶联系方式QQ群374992201暗号我要毕业群内活动新人入群送1-99元红包推荐新人得20%提成超级会员享50%分成未来项目求师哥师姐推荐工作本人要求不高工资够买奶茶同事会讲段子领导不画大饼能带饭的优先将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例