前端大文件上传方案（Vue3+ 原生 JS）
一、需求拆解
核心需求包括：
- 大文件上传：支持 20G 级别文件。
- 文件夹上传下载：必须保留层级结构。
- 加密：传输使用 AES，存储也需加密。
- 断点续传：关闭网页或重启电脑不丢进度。
- 兼容性：需兼容 IE9 及现代浏览器。
- 技术栈：前端 Vue3。
二、前端核心代码（Vue3+ 原生 JS）
1. 文件夹上传与状态管理
IE9 不支持 webkitDirectory，需提示用户或使用 Polyfill。重点处理现代浏览器的 showDirectoryPicker。
import { ref, onMounted } from 'vue';
import CryptoJS from 'crypto-js'; // 加密库
// 全局状态
const uploadTasks = ref([]); // 上传任务列表
const isIE9 = ref(false); // 是否是 IE9 浏览器
const chunkSize = 5 * 1024 * 1024; // 分块大小 5MB
const uploadQueue = ref([]); // 待上传队列
const MAX_CONCURRENT = 3; // 最大并发上传数
// 初始化：检测浏览器类型
onMounted(() => {
isIE9.value = /*@cc_on@*/false || !!document.documentMode === 9;
});
2. 样式定义
.uploader-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
font-family: '微软雅黑', sans-serif;
}
/* 其他样式省略 */
三、关键功能说明
1. 文件夹层级保留
现代浏览器使用 showDirectoryPicker + 递归遍历，记录每个文件的 fullPath。后端收到文件后按 fullPath 创建目录并保存。
2. 断点续传
使用 localStorage 存储每个文件的上传进度（如 upload_${fileId}_progress）。上传前检查服务端是否已接收分块（/api/check-chunk 接口），避免重复上传。
3. 加密传输
前端使用 CryptoJS.AES.encrypt 加密分块内容，后端用相同密钥解密。密钥建议用户输入密码，通过 PBKDF2 派生，防止暴力破解。
4. 兼容 IE9
IE9 不支持 showDirectoryPicker，提示用户使用 Chrome/Firefox。可引入 es5-shim、html5shiv 等 polyfill。
四、开发文档
1. 环境要求
- 前端：Vue3 CLI、Node.js 16+、Chrome/Firefox。
- 后端：SpringBoot 2.7+、Java 11+、MySQL 5.7+。
- 服务器：Linux (CentOS/Ubuntu)、Nginx、IIS。
2. 注意事项
- 文件夹上传：IE9 不支持，需提示用户切换浏览器。
- 加密密钥：示例使用固定密钥，实际项目需让用户输入密码并使用
CryptoJS.PBKDF2派生。 - 大文件分块：
chunkSize建议 5MB，平衡速度和内存。 - 并发限制：
MAX_CONCURRENT=3，避免浏览器崩溃。
