SpringCloud网页如何上传大文件夹并保留目录？

大文件传输解决方案

作为福建农业集团的项目负责人，我理解您面临的是一个具有挑战性的大文件传输需求，涉及国家安全级别的高要求。基于您提供的详细需求，我将从技术架构、解决方案和源代码示例三个方面为您提供专业建议。

一、需求分析与技术挑战

1.1 核心需求总结

超大文件传输：单文件100G，文件夹传输保留层级结构
高稳定性：断点续传支持浏览器刷新和关闭后不丢失进度
高安全性：SM4国密/AES加密传输与存储
全兼容性：支持所有主流浏览器(含IE8)和信创国产环境
多云支持：华为云OBS及其他云存储动态配置
信创合规：国产操作系统、数据库全面适配
源代码授权：预算160万以内，集团内无限制使用

1.2 技术难点分析

100G文件传输稳定性：需要创新的分片、校验和恢复机制
IE8兼容性：现代Web技术与老旧浏览器的适配难题
文件夹结构保持：大多数开源方案缺乏此功能
信创环境适配：国产CPU、操作系统和浏览器的特殊要求
加密性能平衡：大文件加密传输的性能优化

二、解决方案架构设计

2.1 整体架构

[客户端] → [加密传输层] → [负载均衡] → [应用服务器] → [存储适配层] → [云存储/本地存储] ↑ ↑ ↑ ↑ [断点续传] [国密加密] [流量控制] [存储加密]

2.2 关键技术实现方案

文件分片上传

分片策略：动态分片(1-10MB)，根据网络质量自动调整
断点续传：基于文件指纹+分片索引的持久化记录
进度保存：本地存储+服务端双重记录

文件夹传输

// 文件夹结构序列化示例publicclassFolderStructure{privateStringrelativePath;privateListfiles;privateListsubFolders;// 序列化为JSON用于传输publicStringtoJson(){// 实现细节...}}

加密传输

传输加密：SM4/AES双模式支持
存储加密：文件级加密+元数据加密
密钥管理：基于国家密码管理局标准的密钥管理方案

浏览器兼容

IE8适配层：ActiveX控件+Flash备用方案
现代浏览器：HTML5 File API+WebWorker

三、源代码示例

3.1 后端核心代码(SpringBoot)

文件分片接收接口

@RestController@RequestMapping("/api/upload")publicclassBigFileUploadController{@PostMapping("/chunk")publicResponseEntityuploadChunk(@RequestParam("file")MultipartFilefile,@RequestParam("chunkNumber")intchunkNumber,@RequestParam("totalChunks")inttotalChunks,@RequestParam("identifier")Stringidentifier,@RequestParam("filename")Stringfilename,@RequestParam("relativePath")StringrelativePath,HttpServletRequestrequest){// 加密校验if(!SecurityUtil.validateRequest(request)){returnResponseEntity.status(HttpStatus.FORBIDDEN).build();}try{// 处理分片存储FileInfofileInfo=storageService.storeChunk(file.getInputStream(),identifier,chunkNumber,totalChunks,filename,relativePath);returnResponseEntity.ok(fileInfo);}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}}// 其他接口...}

加密存储服务

@ServicepublicclassSecureStorageServiceImplimplementsSecureStorageService{@Value("${storage.encryption.type}")privateStringencryptionType;@OverridepublicvoidencryptAndStore(InputStreaminput,StringdestPath){try(OutputStreamoutput=newFileOutputStream(destPath)){Ciphercipher=getCipher(Cipher.ENCRYPT_MODE);try(CipherOutputStreamcipherOutput=newCipherOutputStream(output,cipher)){byte[]buffer=newbyte[8192];intbytesRead;while((bytesRead=input.read(buffer))!=-1){cipherOutput.write(buffer,0,bytesRead);}}}catch(Exceptione){thrownewStorageException("加密存储失败",e);}}privateCiphergetCipher(intmode)throwsGeneralSecurityException{if("SM4".equalsIgnoreCase(encryptionType)){returnSm4Util.getCipher(mode);}else{returnAesUtil.getCipher(mode);}}}

3.2 前端核心代码(Vue2)

文件上传组件

exportdefault{data(){return{files:[],folderStructure:null,uploadProgress:{},resumeTokens:{}}},methods:{asyncuploadFile(file,relativePath=''){constfileIdentifier=this.generateFileIdentifier(file)constchunkSize=this.calculateChunkSize(file.size)consttotalChunks=Math.ceil(file.size/chunkSize)// 恢复进度检查constresumeToken=this.getResumeToken(fileIdentifier)if(resumeToken){awaitthis.resumeUpload(file,fileIdentifier,resumeToken,relativePath)return}// 新上传for(letchunkNumber=1;chunkNumber<=totalChunks;chunkNumber++){constchunk=file.slice((chunkNumber-1)*chunkSize,chunkNumber*chunkSize)try{constresponse=awaitthis.$http.post('/api/upload/chunk',{file:chunk,chunkNumber,totalChunks,identifier:fileIdentifier,filename:file.name,relativePath},{onUploadProgress:(progressEvent)=>{this.updateProgress(fileIdentifier,chunkNumber,progressEvent)}})// 保存恢复令牌this.saveResumeToken(fileIdentifier,response.data.resumeToken)}catch(error){console.error('上传失败:',error)throwerror}}},// 文件夹上传处理asyncuploadFolder(folderItems){this.folderStructure=this.buildFolderStructure(folderItems)for(constitemoffolderItems){if(item.isDirectory){awaitthis.uploadFolder(item.children)}else{awaitthis.uploadFile(item.file,item.relativePath)}}}}}