http协议下SpringMVC如何高效上传大文件？

项目技术方案：大文件传输系统（企业级高可用方案）
编制：北京某互联网企业前端研发部 - 张工
日期：2023年11月28日

一、项目背景与核心痛点

公司承接政府/军工领域项目，需开发50GB级文件传输系统，现有开源方案存在以下问题：

WebUploader：已停更，IE兼容性差（需Flash），无技术支持
Uppy/Plupload：现代浏览器支持好，但IE11需polyfill，无军工级稳定性保障
商业授权：单套授权成本高（约$5k/年），200+项目部署成本不可控

核心需求：

支持50GB文件分片传输（文件夹保留层级结构）
断点续传（跨浏览器会话持久化）
兼容IE11/Chrome/Firefox/360安全浏览器（兼容模式）
私有化部署（内网环境）
提供完整源代码（避免授权风险）

二、技术选型与架构设计

1. 前端架构（Vue3 + 兼容层）

关键组件：

文件夹解析：基于WebDAV协议解析本地文件夹结构（兼容IE11）
分片引擎：动态调整分片大小（5MB-50MB自适应网络）
持久化存储：
- 优先使用IndexedDB（存储分片元数据）
- 降级使用Cookie（存储关键进度信息，兼容IE11）

2. 后端架构（SpringBoot微服务）

// 文件分片服务接口示例@RestController@RequestMapping("/api/upload")publicclassFileUploadController{@PostMapping("/init")publicResponseEntityinitUpload(@RequestParamStringfileName,@RequestParamlongfileSize,@RequestParamStringrelativePath){// 生成唯一任务ID（UUID v4）StringtaskId=UUID.randomUUID().toString();// 存储元数据到数据库（适配MySQL/Oracle/SQLServer）fileMetaService.save(taskId,fileName,fileSize,relativePath);returnResponseEntity.ok(taskId);}@PostMapping("/chunk")publicResponseEntityuploadChunk(@RequestParamStringtaskId,@RequestParamintchunkIndex,@RequestParamStringchunkHash,@RequestBodybyte[]chunkData){// 校验分片完整性（SHA-256）StringcomputedHash=DigestUtils.sha256Hex(chunkData);if(!computedHash.equals(chunkHash)){thrownewRuntimeException("分片校验失败");}// 存储分片到临时目录PathtempPath=Paths.get("/tmp/upload/"+taskId+"/"+chunkIndex);Files.write(tempPath,chunkData);// 更新数据库分片状态chunkStatusService.markUploaded(taskId,chunkIndex);returnResponseEntity.ok().build();}}

三、核心代码实现

1. 文件夹上传（Vue3组件）

import { ref, onMounted } from 'vue'; import { useIndexedDB } from './useIndexedDB'; // 自定义IndexedDB Hook import { sha256 } from 'js-sha256'; const fileInput = ref(null); const progress = ref(0); const { db, addTask, getTask } = useIndexedDB('fileUploadDB'); // 解析文件夹结构（兼容IE11） const parseFolder = (files) => { const tree = {}; Array.from(files).forEach(file => { const pathParts = file.webkitRelativePath.split('/'); let current = tree; pathParts.forEach((part, index) => { if (index === pathParts.length - 1) { current[part] = { file, path: file.webkitRelativePath, size: file.size }; } else { if (!current[part]) current[part] = {}; current = current[part]; } }); }); return tree; }; // 初始化上传任务 const initUploadTask = async (fileTree) => { const flatFiles = flattenFileTree(fileTree); const taskId = crypto.randomUUID(); // 存储到IndexedDB await addTask({ taskId, files: flatFiles, status: 'pending', createdAt: new Date() }); return taskId; }; // 分片上传逻辑 const uploadChunk = async (taskId, file, chunkIndex, chunkSize) => { const start = chunkIndex * chunkSize; const end = Math.min(file.size, start + chunkSize); const chunk = file.slice(start, end); // 计算分片哈希（用于校验） const chunkHash = sha256(chunk); try { const response = await fetch(`/api/upload/chunk`, { method: 'POST', headers: { 'Content-Type': 'application/octet-stream', 'X-Task-ID': taskId, 'X-Chunk-Index': chunkIndex.toString(), 'X-Chunk-Hash': chunkHash }, body: chunk }); if (!response.ok) throw new Error('上传失败'); // 更新本地进度 const task = await getTask(taskId); task.uploadedChunks.add(chunkIndex); await addTask(task); // 计算总体进度 const totalChunks = Math.ceil(file.size / chunkSize); const fileProgress = (task.uploadedChunks.size / totalChunks) * 100; // 更新全局进度（按文件大小加权） updateGlobalProgress(task, fileProgress); } catch (error) { console.error('分片上传失败:', error); throw error; } };

2. 断点续传持久化（IndexedDB + Cookie）

// useIndexedDB.js - 自定义HookexportfunctionuseIndexedDB(dbName){letdbInstance=null;constinitDB=async()=>{returnnewPromise((resolve,reject)=>{constrequest=indexedDB.open(dbName,2);request.onupgradeneeded=(e)=>{constdb=e.target.result;if(!db.objectStoreNames.contains('tasks')){db.createObjectStore('tasks',{keyPath:'taskId'});}};request.onsuccess=(e)=>{dbInstance=e.target.result;resolve(dbInstance);};request.onerror=(e)=>reject(e.target.error);});};constaddTask=async(task)=>{if(!dbInstance)awaitinitDB();returnnewPromise((resolve,reject)=>{consttx=dbInstance.transaction('tasks','readwrite');conststore=tx.objectStore('tasks');constrequest=store.put(task);request.onsuccess=()=>{// 同步关键信息到Cookie（IE11兼容）setCookie(`upload_task_${task.taskId}`,JSON.stringify({taskId:task.taskId,fileName:task.files[0]?.name,progress:calculateProgress(task)}),30);resolve();};request.onerror=reject;});};return{db:dbInstance,addTask,getTask};}// Cookie兼容层（IE11）functionsetCookie(name,value,days){letexpires='';if(days){constdate=newDate();date.setTime(date.getTime()+(days*24*60*60*1000));expires=`; expires=${date.toUTCString()}`;}document.cookie=`${name}=${value||''}${expires}; path=/`;}