企业官网建设流程全解析

前端老哥外包救星：原生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. 部署步骤

1. 前端打包：npm run build，将dist目录上传至Linux服务器（如/var/www/uploader）。
2. 后端打包：mvn clean package，将jar文件上传至服务器（如/opt/uploader）。
3. 配置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默认端口 } }

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

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

1. 常见问题排查表

2. 扩展功能建议

• 文件哈希校验：上传完成后，前端计算文件MD5，后端校验（防止传输错误）。
• 上传限速：通过axios的onUploadProgress控制分片上传速度（如每秒最多上传1MB）。
• 文件夹重命名：添加右键菜单，支持修改文件夹名称（需后端同步更新路径）。

兄弟，这套代码你拿过去，按照文档集成，保证客户的20G文件夹上传需求能满足！有问题直接甩日志到群里（QQ群：374992201），老炮儿我24小时在线帮你改。记住：不会就查文档，卡壳就问群友——咱前端程序员，接外包就是要“稳准狠”！

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载示例

点击下载完整示例