前端老哥的外包求生记20G大文件上传系统Vue3原生JS兄弟们我是福建一名“头发渐少但代码不秃”的前端程序员最近接了个外包活——给客户做文件管理系统核心需求就一个“20G大文件文件夹上传下载兼容IE9到最新浏览器还要加密、断点续传”。客户拍着桌子说“预算100块你看着办” 我咬着牙想“行吧谁让我爱交朋友呢今天把这系统的前端代码扒得明明白白再送你份‘保姆级’文档保证你直接交给客户收钱不慌”一、需求拆解客户的“魔鬼”要求先给大伙儿捋捋客户的“奇葩”需求其实是行业真实痛点大文件上传20G比我家猫的体重还重我家猫12斤。文件夹上传下载必须保留层级比如/项目/周报/10.1.docx用户每天传几千个文件夹子文件几万。加密传输用AES/SM4存储也加密客户说“数据比命重要”。断点续传关闭网页、重启电脑都不丢进度用户“我上次传到99%关浏览器就没了想砸电脑”。兼容IE9客户业务部还有一批“古董机”Windows 7IE9不能扔啊前端Vue3客户指定框架还说“年轻人就得用新东西”老哥我40岁了还在学Vue3头秃。二、前端核心代码Vue3原生JS附注释1. 文件夹上传保留层级兼容IE9IE9不支持webkitDirectory所以文件夹上传只能“曲线救国”——让用户手动选择文件夹现代浏览器用showDirectoryPickerIE9提示“不支持请用Chrome”。但客户说“用户主要用文件夹传资料”所以重点处理现代浏览器IE9给个友好提示。import { ref, onMounted } from vue; import CryptoJS from crypto-js; // 加密库需npm install crypto-js // 全局状态 const uploadTasks ref([]); // 上传任务列表 const isIE9 ref(false); // 是否是IE9浏览器 const chunkSize 5 * 1024 * 1024; // 分块大小5MB20G4000块合理 const uploadQueue ref([]); // 待上传队列 const MAX_CONCURRENT 3; // 最大并发上传数避免浏览器崩溃 // 初始化检测浏览器类型 onMounted(() { isIE9.value /*cc_on!*/false || !!document.documentMode 9; }); // 触发文件选择普通文件 const triggerFileSelect () { document.getElementById(fileInput).click(); }; // 触发文件夹选择现代浏览器 const triggerFolderSelect async () { if (isIE9.value) return; try { const dirHandle await window.showDirectoryPicker(); const files await traverseDirectory(dirHandle); addFilesToQueue(files); } catch (err) { alert(选文件夹失败${err.message}); } }; // 辅助函数读取文件为ArrayBuffer兼容IE9 const readFileAsArrayBuffer (file) { return new Promise((resolve) { const reader new FileReader(); reader.onload (e) resolve(e.target.result); reader.readAsArrayBuffer(file); }); }; // 辅助函数计算文件MD5用CryptoJS const getFileMd5 (file) { return new Promise((resolve) { const reader new FileReader(); reader.onload (e) { const wordArray CryptoJS.lib.WordArray.create(e.target.result); resolve(CryptoJS.MD5(wordArray).toString()); }; reader.readAsArrayBuffer(file); }); }; // 辅助函数格式化文件大小 const formatFileSize (size) { if (size 1024 * 1024 * 1024) { return ${(size / (1024 * 1024 * 1024)).toFixed(2)}GB; } else if (size 1024 * 1024) { return ${(size / (1024 * 1024)).toFixed(2)}MB; } else { return ${(size / 1024).toFixed(2)}KB; } };三、关键功能说明老哥踩过的坑1. 文件夹层级保留现代浏览器用showDirectoryPicker递归遍历记录每个文件的fullPath如/项目/周报/10.1.docx。后端收到文件后按fullPath创建目录结构比如/项目/周报/再保存文件。2. 断点续传跨浏览器会话用localStorage存储每个文件的上传进度upload_${fileId}_progress。上传前检查服务端是否已接收分块/api/check-chunk接口避免重复上传。3. 加密传输前端用AES加密分块内容CryptoJS.AES.encrypt后端用相同密钥解密。注意密钥不能硬编码实际项目中应让用户输入密码用PBKDF2派生密钥示例简化了记得改。4. 兼容IE9引入es5-shim、html5shiv、whatwg-fetch等polyfill在index.html中添加四、开发文档交给客户的“说明书”1. 环境要求前端Vue3 CLI、Node.js 16、Chrome/FirefoxIE9需额外polyfill。后端SpringBoot 2.7、Java 11、MySQL 5.7。服务器LinuxCentOS/Ubuntu、Nginx部署前端、IIS部署后端可选。2. 安装步骤克隆项目git clone https://github.com/你的仓库/大文件上传系统.git。安装前端依赖cd frontend npm install。配置后端修改application.properties中的数据库连接、文件存储路径file.upload.path./uploads。启动后端mvn spring-boot:run。启动前端npm run dev。3. 注意事项文件夹上传IE9不支持提示用户用Chrome/Firefox。加密密钥示例用了固定密钥实际需让用户输入密码用CryptoJS.PBKDF2派生密钥防止暴力破解。大文件分块chunkSize建议5MB20G4000块平衡速度和内存。并发限制MAX_CONCURRENT3避免浏览器崩溃可根据用户电脑配置调整。五、最后唠叨老哥的心里话兄弟这套代码我调试了整整两周踩过IE9的坑、分块合并的坑、加密性能的坑现在基本能跑通了。虽然还有优化空间比如SM4加密、断点续传的服务端校验增强但应付客户演示小项目完全够用要是客户要更复杂的功能比如秒传、多线程下载咱们可以群里一起讨论——我建了个QQ群374992201里面有做后端的、测试的、产品经理平时接单、技术交流都在这儿。群里天天发红包1~99元推荐项目还能拿20%提成比打工香多了对了要是你接了这单记得请我喝奶茶微信转账就行——毕竟老哥我把压箱底的代码都掏出来了最后毕业找工作/接外包咱们一起加油将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例