vue多平台大文件上传控件的源码解析与分享

前端老哥的外包求生记：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. 安装步骤

1. 克隆项目：git clone https://github.com/你的仓库/大文件上传系统.git。
2. 安装前端依赖：cd frontend && npm install。
3. 配置后端：修改application.properties中的数据库连接、文件存储路径（file.upload.path=./uploads）。
4. 启动后端：mvn spring-boot:run。
5. 启动前端：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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载示例

点击下载完整示例