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

航空航天网页项目怎么用vue3实现大文件分片上传源码？

news 2026/3/26 17:18:32

前端老哥的“懒人”大文件上传方案（Vue3+原生JS）

兄弟们！我是辽宁一名“头发没秃但代码量秃”的前端程序员，最近接了个外包活——给客户做文件管理系统，核心需求就仨字儿：“稳、省、兼容”！客户拍着桌子说：“20G大文件、文件夹上传下载、加密、断点续传，预算100块，你看着办！” 我揉着太阳穴想：“行吧，谁让我爱交朋友呢？今天把这系统的‘压箱底’代码扒给你，再送你份‘保姆级’文档，保证你直接交给客户，收钱不慌！”

一、需求拆解（客户的“魔鬼”要求，我用“懒人”方案搞定）

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

大文件上传：20G！比我家冰箱还沉（我家冰箱100斤）。
文件夹上传下载：必须保留层级（比如/项目/周报/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; // 最大并发上传数（避免浏览器崩溃） // 初始化：检测浏览器类型（IE9兼容） onMounted(() => { isIE9.value = /*@cc_on@*/false || !!document.documentMode === 9; }); /* 样式懒人版：简单好看，兼容旧浏览器 */ .uploader-container { max-width: 800px; margin: 20px auto; padding: 20px; font-family: '微软雅黑', sans-serif; } .upload-btn-group { margin-bottom: 20px; } .upload-btn-group button { padding: 8px 16px; margin-left: 10px; background: #409eff; color: white; border: none; border-radius: 4px; cursor: pointer; } .progress-list { border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; } .progress-item { margin-bottom: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px; } .file-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; } .progress-bar { height: 20px; background: #e9ecef; border-radius: 10px; position: relative; overflow: hidden; } .progress-fill { height: 100%; background: #67c23a; transition: width 0.3s; } .progress-text { position: absolute; top: 0; right: 10px; line-height: 20px; color: white; font-size: 12px; } .ie-warning { color: #f56c6c; margin-left: 10px; font-size: 12px; }

三、关键功能说明（老哥踩过的坑，帮你避开）

1. 文件夹层级保留（懒人秘诀）

现代浏览器用showDirectoryPicker+递归遍历，记录每个文件的fullPath（如/项目/周报/10.1.docx）。
后端收到文件后，按fullPath创建目录（比如mkdir -p /项目/周报），再保存文件（后端代码用Java的Files.createDirectories）。