大文件传输方案设计与实现方案
作为湖南XX软件公司的前端工程师，面对20G大文件传输的需求，我经过深入调研和分析后提出以下解决方案。
一、技术挑战分析
大文件传输：
- 20G文件直接上传会导致内存溢出
- 网络中断后需要支持断点续传
- 传输进度监控和速度控制
浏览器兼容性：
- IE8不支持现代文件API(File API)
- 老浏览器不支持WebSocket和Fetch API
- 跨浏览器行为不一致问题
加密要求：
- 前端实现SM4和AES加密
- 密钥安全管理和传输
文件夹结构保持：
- 需要设计合理的数据结构表示层级
- 后端需要支持多级目录存储
二、整体架构设计
前端方案
后端方案
三、前端核心实现
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);六、部署与优化建议
前端优化：
- 使用Web Worker处理加密计算，避免UI阻塞
- 实现自适应分片大小，根据网络质量动态调整
- 添加本地存储记录，支持页面刷新后恢复上传
后端优化：
- 使用Nginx进行负载均衡和文件上传代理
- 实现分布式文件存储，支持水平扩展
- 添加Redis缓存已上传分片信息
安全建议：
- 实现密钥轮换机制
- 添加文件完整性校验
- 限制单个IP的上传速度和并发数
七、测试方案
单元测试：
- 分片功能测试
- 加密/解密测试
- 文件夹结构解析测试
集成测试：
- 跨浏览器测试
- 大文件(20G+)传输测试
- 断网恢复测试
性能测试：
- 并发上传测试
- 网络限速环境测试
- 服务器资源占用监控
此方案综合了现代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
创建数据库
配置数据库连接信息
检查数据库配置
访问页面进行测试
相关参考：
文件保存位置，
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
下载完整示例
下载完整示例
