国密加密在大文件上传插件中的实现与优化

大文件传输方案设计与实现方案

作为湖南XX软件公司的前端工程师，面对20G大文件传输的需求，我经过深入调研和分析后提出以下解决方案。

一、技术挑战分析

1. 大文件传输：

   • 20G文件直接上传会导致内存溢出
   • 网络中断后需要支持断点续传
   • 传输进度监控和速度控制

2. 浏览器兼容性：

   • IE8不支持现代文件API(File API)
   • 老浏览器不支持WebSocket和Fetch API
   • 跨浏览器行为不一致问题

3. 加密要求：

   • 前端实现SM4和AES加密
   • 密钥安全管理和传输

4. 文件夹结构保持：

   • 需要设计合理的数据结构表示层级
   • 后端需要支持多级目录存储

二、整体架构设计

前端方案

后端方案

三、前端核心实现

1. 文件分片上传基础代码

// file-uploader.jsclassFileUploader{constructor(options){this.chunkSize=options.chunkSize||5*1024*1024;// 默认5MBthis.maxRetry=options.maxRetry||3;this.concurrent=options.concurrent||3;this.encryptAlgorithm=options.encryptAlgorithm||'AES';}asyncupload(file){consttotalChunks=Math.ceil(file.size/this.chunkSize);constfileHash=awaitthis.calculateFileHash(file);// 检查服务端已上传分片const{uploadedChunks}=awaitthis.checkServerStatus(file.name,fileHash);constuploadQueue=[];for(leti=0;i<totalChunks;i++){if(!uploadedChunks.includes(i)){uploadQueue.push(this.uploadChunk(file,i,fileHash));}}awaitPromise.all(uploadQueue.slice(0,this.concurrent));awaitthis.mergeChunks(file.name,fileHash,totalChunks);}asyncuploadChunk(file,chunkIndex,fileHash){conststart=chunkIndex*this.chunkSize;constend=Math.min(file.size,start+this.chunkSize);constchunk=file.slice(start,end);// 加密处理constencryptedChunk=awaitthis.encrypt(chunk);constformData=newFormData();formData.append('file',encryptedChunk);formData.append('chunkIndex',chunkIndex);formData.append('totalChunks',Math.ceil(file.size/this.chunkSize));formData.append('fileHash',fileHash);for(letattempt=0;attempt<this.maxRetry;attempt++){try{awaitaxios.post('/api/upload',formData,{onUploadProgress:(progressEvent)=>{this.updateProgress(chunkIndex,progressEvent.loaded/progressEvent.total);}});return;}catch(error){if(attempt===this.maxRetry-1)throwerror;}}}asyncencrypt(data){if(this.encryptAlgorithm==='SM4'){returnsm4Encrypt(data,this.encryptionKey);}else{returnaesEncrypt(data,this.encryptionKey);}}}

2. IE8兼容方案

// ie8-compat.jsfunctionsetupIEFallback(){if(!window.File||!window.FileReader||!window.FileList||!window.Blob){// 使用Flash或ActiveX后备方案document.getElementById('file-input').outerHTML=`您的浏览器不支持文件上传功能`;}}

3. 文件夹上传实现

// folder-uploader.jsasyncfunctionuploadFolder(folderInput){constentries=awaitgetFolderEntries(folderInput);conststructure={};for(constentryofentries){constrelativePath=entry.webkitRelativePath;constpathParts=relativePath.split('/');letcurrentLevel=structure;for(leti=0;i<pathParts.length-1;i++){constpart=pathParts[i];if(!currentLevel[part]){currentLevel[part]={};}currentLevel=currentLevel[part];}if(entry.isFile){constfile=awaitgetFileFromEntry(entry);currentLevel[pathParts[pathParts.length-1]]=file;}}awaituploadFolderStructure(structure);}asyncfunctionuploadFolderStructure(structure,basePath=''){for(const[name,content]ofObject.entries(structure)){constcurrentPath=basePath?`${basePath}/${name}`:name;if(contentinstanceofFile){// 上传文件constuploader=newFileUploader();awaituploader.upload(content,currentPath);}else{// 创建目录并递归上传内容awaitaxios.post('/api/createFolder',{path:currentPath});awaituploadFolderStructure(content,currentPath);}}}

四、后端核心实现

1. 分片接收接口

// UploadController.java@RestController@RequestMapping("/api")publicclassUploadController{@PostMapping("/upload")publicResponseEntityuploadChunk(@RequestParam("file")MultipartFilefile,@RequestParam("chunkIndex")intchunkIndex,@RequestParam("totalChunks")inttotalChunks,@RequestParam("fileHash")StringfileHash){try{// 解密处理byte[]decryptedData=decrypt(file.getBytes(),getEncryptionKey());// 存储分片StringtempDir=getTempDir(fileHash);Files.createDirectories(Paths.get(tempDir));PathchunkPath=Paths.get(tempDir,String.valueOf(chunkIndex));Files.write(chunkPath,decryptedData);returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}}@PostMapping("/merge")publicResponseEntitymergeChunks(@RequestParam("fileName")StringfileName,@RequestParam("fileHash")StringfileHash,@RequestParam("totalChunks")inttotalChunks){try{StringtempDir=getTempDir(fileHash);PathoutputPath=Paths.get(getStorageDir(),fileName);try(OutputStreamos=newFileOutputStream(outputPath.toFile())){for(inti=0;i<totalChunks;i++){PathchunkPath=Paths.get(tempDir,String.valueOf(i));byte[]chunkData=Files.readAllBytes(chunkPath);os.write(chunkData);}}// 存储加密encryptAndStore(outputPath,getStorageKey());// 清理临时分片FileUtils.deleteDirectory(newFile(tempDir));returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}}}

2. 文件夹结构存储设计

// FileEntity.java@Entity@Table(name="file_storage")publicclassFileEntity{@Id@GeneratedValue(strategy=GenerationType.IDENTITY)privateLongid;privateStringname;privateStringpath;// 完整路径如 /folder/subfolder/file.txtprivatebooleanisDirectory;privateLongparentId;// 父目录IDprivateStringstorageKey;// 物理存储键privateStringencryptionAlgorithm;// SM4/AESprivateStringchecksum;privatelongsize;// 关系映射@OneToMany@JoinColumn(name="parentId")privateListchildren;// Getters and setters...}

3. 加密服务实现

// EncryptionService.java@ServicepublicclassEncryptionService{publicbyte[]encrypt(byte[]data,Stringalgorithm,Stringkey){if("SM4".equalsIgnoreCase(algorithm)){returnSM4Util.encrypt(data,key);}else{returnAESUtil.encrypt(data,key);}}publicbyte[]decrypt(byte[]data,Stringalgorithm,Stringkey){if("SM4".equalsIgnoreCase(algorithm)){returnSM4Util.decrypt(data,key);}else{returnAESUtil.decrypt(data,key);}}}

五、数据库设计

CREATETABLEfile_storage(idBIGINTPRIMARYKEYAUTO_INCREMENT,nameVARCHAR(255)NOTNULL,pathVARCHAR(1024)NOTNULL,is_directoryBOOLEANNOTNULL,parent_idBIGINT,storage_keyVARCHAR(255),encryption_algorithmVARCHAR(10),checksumVARCHAR(64),sizeBIGINT,created_atTIMESTAMPDEFAULTCURRENT_TIMESTAMP,updated_atTIMESTAMPDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,FOREIGNKEY(parent_id)REFERENCESfile_storage(id));CREATEINDEXidx_file_pathONfile_storage(path);CREATEINDEXidx_file_parentONfile_storage(parent_id);

六、部署与优化建议

1. 前端优化：

   • 使用Web Worker处理加密计算，避免UI阻塞
   • 实现自适应分片大小，根据网络质量动态调整
   • 添加本地存储记录，支持页面刷新后恢复上传

2. 后端优化：

   • 使用Nginx进行负载均衡和文件上传代理
   • 实现分布式文件存储，支持水平扩展
   • 添加Redis缓存已上传分片信息

3. 安全建议：

   • 实现密钥轮换机制
   • 添加文件完整性校验
   • 限制单个IP的上传速度和并发数

七、测试方案

1. 单元测试：

   • 分片功能测试
   • 加密/解密测试
   • 文件夹结构解析测试

2. 集成测试：

   • 跨浏览器测试
   • 大文件(20G+)传输测试
   • 断网恢复测试

3. 性能测试：

   • 并发上传测试
   • 网络限速环境测试
   • 服务器资源占用监控

此方案综合了现代Web技术和传统浏览器兼容性需求，采用分片上传、断点续传和加密传输等核心技术，能够满足20G大文件传输的需求，同时保持文件夹结构和跨平台兼容性。

设置框架

安装.NET Framework 4.7.2
https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472
框架选择4.7.2

添加3rd引用

编译项目

NOSQL

NOSQL无需任何配置可直接访问页面进行测试

SQL

使用IIS
大文件上传测试推荐使用IIS以获取更高性能。

使用IIS Express

小文件上传测试可以使用IIS Express

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

相关参考：
文件保存位置，

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载完整示例

下载完整示例