如何在Vue网页中实现文件夹的秒传与断点续传功能？
兄弟，这套代码我调试了整整两周，踩过IE9的坑、分块合并的坑、加密性能的坑，现在基本能跑通了。虽然还有优化空间（比如SM4加密、断点续传的服务端校验增强），但应付客户演示+小项目完全够用！要是客户要更复杂的功能（比如秒传、多线程下载），咱们可以群里一起讨论——我建了个QQ群（374992201），里面有做后端的、测试的、产品经理，平时接单、技术交流都在这儿。群里天天发红包（1~99元），推荐项目还
前端老哥的“懒人”大文件上传方案（Vue3+原生JS）
兄弟们！我是辽宁一名“头发没秃但代码量秃”的前端程序员，最近接了个外包活——给客户做文件管理系统，核心需求就仨字儿：“稳、省、兼容”！客户拍着桌子说：“20G大文件、文件夹上传下载、加密、断点续传，预算100块，你看着办！” 我揉着太阳穴想：“行吧，谁让我爱交朋友呢？今天把这系统的‘压箱底’代码扒给你，再送你份‘保姆级’文档，保证你直接交给客户，收钱不慌！”
一、需求拆解（客户的“魔鬼”要求，我用“懒人”方案搞定）
先给大伙儿捋捋客户的“奇葩”需求（其实是行业真实痛点）：
- 大文件上传：20G！比我家冰箱还沉（我家冰箱100斤）。
- 文件夹上传下载：必须保留层级（比如
/项目/周报/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; // 最大并发上传数（避免浏览器崩溃）
// 初始化：检测浏览器类型（IE9兼容）
onMounted(() => {
isIE9.value = /*@cc_on@*/false || !!document.documentMode === 9;
});
/* 样式懒人版：简单好看，兼容旧浏览器 */
.uploader-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
font-family: '微软雅黑', sans-serif;
}
.upload-btn-group {
margin-bottom: 20px;
}
.upload-btn-group button {
padding: 8px 16px;
margin-left: 10px;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.progress-list {
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
}
.progress-item {
margin-bottom: 15px;
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
}
.file-info {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
}
.progress-bar {
height: 20px;
background: #e9ecef;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #67c23a;
transition: width 0.3s;
}
.progress-text {
position: absolute;
top: 0;
right: 10px;
line-height: 20px;
color: white;
font-size: 12px;
}
.ie-warning {
color: #f56c6c;
margin-left: 10px;
font-size: 12px;
}
三、关键功能说明（老哥踩过的坑，帮你避开）
1. 文件夹层级保留（懒人秘诀）
- 现代浏览器用
showDirectoryPicker+递归遍历，记录每个文件的fullPath（如/项目/周报/10.1.docx）。 - 后端收到文件后，按
fullPath创建目录（比如mkdir -p /项目/周报），再保存文件（后端代码用Java的Files.createDirectories）。
2. 断点续传（跨浏览器会话，懒人福音）
- 用
localStorage存每个文件的上传进度（upload_${fileId}_progress），页面刷新/重启电脑都不丢。 - 上传前检查服务端是否已接收分块（
/api/check-chunk接口），避免重复上传（服务端存已接收的分块MD5）。
3. 加密传输（AES，懒人专用）
- 前端用
CryptoJS.AES.encrypt加密分块内容，后端用相同密钥解密（密钥建议用户输入密码，用PBKDF2派生，示例简化了）。 - 注意：密钥不能硬编码！实际项目中让用户输入密码，前端用
CryptoJS.PBKDF2生成密钥（防暴力破解）。
4. 兼容IE9（懒人兼容方案）
- 引入
es5-shim、html5shiv、whatwg-fetch等polyfill（在index.html中添加）： - IE9不支持
showDirectoryPicker，提示用户用Chrome/Firefox（客户业务部要兼容，只能这样）。
四、开发文档（交给客户的“说明书”，懒人版）
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（懒人用cnpm更快）。 - 配置后端：修改
application.properties中的数据库连接、文件存储路径（file.upload.path=./uploads）。 - 启动后端：
mvn spring-boot:run（懒人用IDEA直接点运行）。 - 启动前端：
npm run dev（懒人用VS Code的终端）。
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
处理事件
启动测试
启动成功
效果
数据库
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
下载示例
惟楚有才，于斯为盛。欢迎来到长沙！！！ 茶颜悦色、臭豆腐、CSDN和你一个都不能少~
更多推荐
13
0- 0
已为社区贡献4条内容
所有评论(0)