当前位置：首页 > news >正文

WebUploader如何配合Vue2实现百万文件上传的批量处理？

news 2026/6/3 6:50:21

前端老哥的外包求生记：20G大文件上传系统（Vue3+原生JS）

兄弟们！我是福建一名“头发渐少但代码不秃”的前端程序员，最近接了个外包活——给客户做文件管理系统，核心需求就一个：“20G大文件+文件夹上传下载，兼容IE9到最新浏览器，还要加密、断点续传”。客户拍着桌子说：“预算100块，你看着办！” 我咬着牙想：“行吧，谁让我爱交朋友呢？今天把这系统的前端代码扒得明明白白，再送你份‘保姆级’文档，保证你直接交给客户，收钱不慌！”

一、需求拆解（客户的“魔鬼”要求）

先给大伙儿捋捋客户的“奇葩”需求（其实是行业真实痛点）：

大文件上传：20G！比我家猫的体重还重（我家猫12斤）。
文件夹上传下载：必须保留层级（比如/项目/周报/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; // 最大并发上传数（避免浏览器崩溃） // 初始化：检测浏览器类型 onMounted(() => { isIE9.value = /*@cc_on!@*/false || !!document.documentMode === 9; }); // 触发文件选择（普通文件） const triggerFileSelect = () => { document.getElementById('fileInput').click(); }; // 触发文件夹选择（现代浏览器） const triggerFolderSelect = async () => { if (isIE9.value) return; try { const dirHandle = await window.showDirectoryPicker(); const files = await traverseDirectory(dirHandle); addFilesToQueue(files); } catch (err) { alert(`选文件夹失败：${err.message}`); } }; // 辅助函数：读取文件为ArrayBuffer（兼容IE9） const readFileAsArrayBuffer = (file) => { return new Promise((resolve) => { const reader = new FileReader(); reader.onload = (e) => resolve(e.target.result); reader.readAsArrayBuffer(file); }); }; // 辅助函数：计算文件MD5（用CryptoJS） const getFileMd5 = (file) => { return new Promise((resolve) => { const reader = new FileReader(); reader.onload = (e) => { const wordArray = CryptoJS.lib.WordArray.create(e.target.result); resolve(CryptoJS.MD5(wordArray).toString()); }; reader.readAsArrayBuffer(file); }); }; // 辅助函数：格式化文件大小 const formatFileSize = (size) => { if (size >= 1024 * 1024 * 1024) { return `${(size / (1024 * 1024 * 1024)).toFixed(2)}GB`; } else if (size >= 1024 * 1024) { return `${(size / (1024 * 1024)).toFixed(2)}MB`; } else { return `${(size / 1024).toFixed(2)}KB`; } };