前端大文件上传方案（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 === ;
});
