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

