前端老哥的外包求生记：20G大文件上传系统（Vue3+原生JS）
兄弟们！我是福建一名“头发渐少但代码不秃”的前端程序员，最近接了个外包活——给客户做文件管理系统，核心需求就一个：“20G大文件+文件夹上传下载，兼容IE9到最新浏览器，还要加密、断点续传”。客户拍着桌子说：“预算100块，你看着办！” 我咬着牙想：“行吧，谁让我爱交朋友呢？今天把这系统的前端代码扒得明明白白，再送你份‘保姆级’文档，保证你直接交给客户，收钱不慌！”
一、需求拆解（客户的“魔鬼”要求）
先给大伙儿捋捋客户的“奇葩”需求（其实是行业真实痛点）：
- 大文件上传：20G！比我家猫的体重还重（我家猫12斤）。
- 文件夹上传下载：必须保留层级（比如
/项目/周报/10.1.docx），用户每天传几千个文件夹，子文件几万+。 - 加密：传输用AES/SM4，存储也加密（客户说“数据比命重要”）。
- 断点续传：关闭网页、重启电脑都不丢进度（用户：“我上次传到99%，关浏览器就没了，想砸电脑！”）。
- 兼容IE9：客户业务部还有一批“古董机”（Windows 7+IE9），不能扔啊！
- 前端Vue3：客户指定框架，还说“年轻人就得用新东西”（老哥我40岁了，还在学Vue3，头秃）。
二、前端核心代码（Vue3+原生JS，附注释）
1. 文件夹上传（保留层级，兼容IE9+）
IE9不支持webkitDirectory，所以文件夹上传只能“曲线救国”——让用户手动选择文件夹（现代浏览器用showDirectoryPicker，IE9提示“不支持，请用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; // 分块大小5MB（20G=4000块，合理） 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/Firefox（IE9需额外polyfill）。
- 后端：SpringBoot 2.7+、Java 11+、MySQL 5.7+。
- 服务器：Linux（CentOS/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建议5MB（20G=4000块，平衡速度和内存）。 - 并发限制：
MAX_CONCURRENT=3（避免浏览器崩溃，可根据用户电脑配置调整）。
五、最后唠叨（老哥的心里话）
兄弟，这套代码我调试了整整两周，踩过IE9的坑、分块合并的坑、加密性能的坑，现在基本能跑通了。虽然还有优化空间（比如SM4加密、断点续传的服务端校验增强），但应付客户演示+小项目完全够用！
要是客户要更复杂的功能（比如秒传、多线程下载），咱们可以群里一起讨论——我建了个QQ群（374992201），里面有做后端的、测试的、产品经理，平时接单、技术交流都在这儿。群里天天发红包（1~99元），推荐项目还能拿20%提成，比打工香多了！
对了，要是你接了这单，记得请我喝奶茶（微信转账就行）——毕竟老哥我把压箱底的代码都掏出来了！
最后：毕业找工作/接外包，咱们一起加油！💪
将组件复制到项目中
示例中已经包含此目录
引入组件
配置接口地址
接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
处理事件
启动测试
启动成功
效果
数据库
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
下载示例
点击下载完整示例
