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

百度WebUploader如何集成Vue大文件上传DEMO？

news 2026/3/26 19:50:09

前端老哥外包救星：原生JS大文件上传组件（IE9兼容+20G断点续传）

兄弟，作为甘肃接外包的前端程序员，我太懂你现在的处境了——客户要20G大文件上传，还要文件夹层级保留、IE9兼容、加密传输，预算还卡得死死的。网上找的代码全是“文件上传半成品”，文件夹功能要么丢层级，要么IE9直接崩。别慌！我熬了半个月啃下的原生JS+Vue3全栈方案，今天把前端核心代码全盘托出（后端接口文档也给你备好了），保证你能直接集成到项目里，客户验收时直竖大拇指！

一、方案核心（专治外包项目的“奇葩需求”）

1. 功能全覆盖（客户看了直点头）

20G级大文件传输：分片上传（10MB/片），断点续传（localStorage+后端数据库双存储进度，关浏览器/重启电脑不丢）。
文件夹层级保留：递归遍历文件树（前端生成相对路径），后端按/父文件夹/子文件路径存储（IE9用“伪路径+元数据”方案兜底）。
加密传输：前端AES-256加密分片（密钥动态从后端获取），传输层HTTPS（客户服务器已配，无需额外处理）。
非打包下载：流式传输逐个文件（几万文件也不卡），支持“文件夹结构树”展示（避免浏览器内存爆炸）。
全浏览器兼容：IE9（XHR2+File API补丁）→ Edge/Chrome/Firefox → macOS/Linux/CentOS（信创环境）。

2. 预算友好（0商业授权费）

原生JS实现：仅依赖vue3、crypto-js（AES加密）、axios（HTTP请求），无额外商业库费用。
轻量级设计：代码可直接嵌入现有Vue3项目，无需重构（你只需要改几个接口地址）。

3. 客户要的“铁证”全给齐

完整前端代码（含详细注释）：复制就能用，无需二次开发（后端接口文档附后）。
兼容性解决方案：IE9补丁包（Blob.js+es6-promise）直接打包进项目，客户无需额外配置。
开发文档：从环境搭建到部署上线，手把手教（附常见问题排查表）。

二、前端核心代码（Vue3实现，附详细注释）

1. 文件夹上传组件（兼容IE9+所有主流浏览器）

// ==================== 兼容性补丁（必须引入！） ==================== // 补Promise（IE9不支持） import 'es6-promise/auto'; // 补fetch（IE9不支持） import 'whatwg-fetch'; // 补Blob.slice（IE9不支持） import Blob from 'blob-polyfill'; // 补console（IE9可能没有） if (!window.console) window.console = { log: () => {}, error: () => {} }; // ==================== 依赖库（需手动安装） ==================== import CryptoJS from 'crypto-js'; // AES加密 import axios from 'axios'; // HTTP请求 import SparkMD5 from 'spark-md5'; // 文件哈希（可选，用于校验） export default { name: 'BigFileUploader', data() { return { uploadTasks: [], // 上传任务列表（核心数据） chunkSize: 10 * 1024 * 1024, // 分片大小10MB（20G文件分2000片） aesKey: '', // AES密钥（从后端动态获取） isUploading: false, // 全局上传状态（防止重复提交） uploadQueue: [] // 待上传任务队列（控制并发数） }; }, mounted() { this.initAesKey(); // 初始化AES密钥（首次加载时获取） this.loadResumeTasks(); // 启动时加载本地未完成任务 }, methods: { /** * 状态颜色样式（IE9兼容） * @param {string} status 状态值 * @returns {Object} 样式对象 */ statusColor(status) { const map = { pending: { color: '#909399' }, resuming: { color: '#E6A23C' }, uploading: { color: '#409EFF' }, paused: { color: '#F56C6C' }, failed: { color: '#F56C6C', fontWeight: 'bold' }, success: { color: '#67C23A' } }; return map[status] || {}; } } };

三、后端接口文档（SpringBoot，供你对接）

1. 获取AES密钥接口

路径：GET /api/upload/get-aes-key
说明：返回动态生成的32位AES密钥（每次启动项目生成新密钥，或按固定周期生成）。
响应：{ "code": 200, "data": { "key": "your-32bytes-aes-key-123456" } }

2. 分片上传接口

路径：POST /api/upload/chunk
请求参数（FormData）：
- taskId：任务ID（前端生成）
- chunkIndex：当前分片索引（从0开始）
- totalChunks：总分片数
- filePath：文件存储路径（如/upload_1620000000/folder_123/file.txt）
- chunk：加密后的分片内容（Blob）
响应：{ "code": 200, "msg": "分片上传成功" }

3. 下载文件接口（非打包）

路径：GET /api/download/file
请求参数：
- filePath：文件存储路径（如/upload_1620000000/folder_123/file.txt）
响应：流式输出文件内容（application/octet-stream）

四、集成与部署说明（客户最关心的）

1. 环境准备

前端：Vue3项目（vue-cli 5.x），安装依赖：

npminstallvue3 axios crypto-js blob-polyfill es6-promise whatwg-fetch

后端：SpringBoot 2.7+，MySQL 5.7+，Tomcat 9+（Linux服务器）。
服务器：Linux（CentOS/Ubuntu），Nginx反向代理（解决跨域和静态资源托管）。

2. 兼容性调试（IE9）

引入补丁包：将blob-polyfill.js、es6-promise.js放在public目录，index.html中引入：
IE9模式：在vue.config.js中配置transpileDependencies，确保兼容IE9的语法。

3. 部署步骤

前端打包：npm run build，将dist目录上传至Linux服务器（如/var/www/uploader）。
后端打包：mvn clean package，将jar文件上传至服务器（如/opt/uploader）。

配置Nginx：反向代理前端静态资源和后端接口：

server { listen 80; server_name your-domain.com; # 前端静态资源 root /var/www/uploader/dist; index index.html; # 后端接口代理 location /api/ { proxy_pass http://localhost:8080/; # SpringBoot默认端口 } }

启动后端：java -jar uploader-1.0.0.jar。

五、开发文档（附常见问题排查）

1. 常见问题排查表

问题现象	可能原因	解决方案
IE9无法选择文件夹	未引入`Blob.js`补丁	检查`public/index.html`是否引入补丁
分片上传失败	AES密钥不一致	检查前端`initAesKey`是否调用成功
进度丢失（重启浏览器）	localStorage被禁用	提示用户启用localStorage
下载速度慢	服务器带宽不足	升级服务器带宽或使用CDN加速