基于 Vue3 的大文件分片加密上传与断点续传方案
在军工科研及企业级场景中，大文件传输往往面临带宽限制、网络不稳定及数据安全等挑战。本文分享一种基于 Vue3 和原生 JavaScript 的解决方案，实现 20G 级文件的分片上传、AES 加密存储及断点续传功能，同时兼顾文件夹层级保留与旧版浏览器兼容性。
需求分析
核心痛点通常集中在以下几个方面：
- 超大文件处理：需支持 20G 以上文件，避免内存溢出。
- 文件夹结构保留：上传时需保持
/项目/周报/10.1.docx的目录层级。 - 数据安全性：传输过程采用 AES 加密，确保敏感数据不泄露。
- 断点续传：网络中断或页面刷新后，能自动恢复进度，无需重头开始。
- 兼容性：需适配现代浏览器，并对 IE9 等老旧环境提供降级提示。
核心实现逻辑
1. 前端架构与状态管理
使用 Vue3 的组合式 API 管理上传任务队列。通过 localStorage 持久化保存每个文件的上传进度，确保会话丢失后仍能恢复。并发控制设置为 3，防止浏览器因请求过多而崩溃。
import { ref, onMounted } from 'vue';
import CryptoJS from 'crypto-js';
// 全局状态
const uploadTasks = ref([]);
const isIE9 = ref(false);
const chunkSize = 5 * 1024 * 1024; // 分块大小 5MB
const uploadQueue = ref([]);
const MAX_CONCURRENT = 3;
// 初始化：检测浏览器类型（兼容 IE9）
onMounted(() => {
isIE9.value = /*@cc_on@*/false || !!document.documentMode === 9;
});
