当前位置：首页 > news >正文

国防军工网页项目，如何选择文件上传下载的解决方案？

news 2026/4/3 19:49:08

大文件传输系统开发方案

项目背景与需求分析

作为广东某软件公司的前端工程师，我正负责公司新项目的大文件传输模块开发工作。客户需求具有以下核心特点：

超大文件支持：需处理20G级别的文件传输
复杂场景覆盖：
- 文件/文件夹上传下载（保持层级结构）
- 广泛的浏览器兼容性（包括IE8和各种信创浏览器）
- 多架构CPU支持（x86/ARM/MIPS/LoongArch）
- 多数据库支持（SQL Server/MySQL/Oracle/达梦/人大金仓）
高安全性要求：
- 传输加密（SM4/AES可选）
- 存储加密
高可靠性需求：
- 断点续传
- 进度持久化
- 错误恢复机制

技术方案设计

系统架构

[前端Vue3组件] ├─ 现代浏览器通道(HTML5 API/WebWorker) ├─ IE8兼容通道(ActiveX/Flash) └─ 信创浏览器适配层 [.NET Core后端服务] ├─ 文件分片处理 ├─ 加密/解密服务 ├─ 多数据库适配层 └─ 华为OBS存储网关 [持久化层] ├─ MySQL (主数据库) ├─ 可选数据库驱动 └─ 分布式缓存

前端技术选型

核心上传组件：基于Vue3 Composition API封装的自研组件
分片策略：动态分片（10MB基础分片，根据网络质量自动调整）
断点续传：LocalStorage + IndexedDB + 服务端校验三保险
浏览器兼容：
- 现代浏览器：File API + Web Workers
- IE8：Flash + ActiveX后备方案
- 信创浏览器：特征检测+自动降级

核心代码实现

前端组件实现 (Vue3)

// file-uploader.tsinterfaceUploadOptions{chunkSize?:number;maxRetry?:number;encryption?:'SM4'|'AES';dbConfig?:DbConfig;}classFileUploader{privateoptions:UploadOptions;privatedb:IDBWrapper;constructor(options:UploadOptions={}){this.options={chunkSize:10*1024*1024,// 10MBmaxRetry:3,encryption:'SM4',...options};this.initDB();}privateasyncinitDB(){this.db=newIDBWrapper('upload_progress_db',1);awaitthis.db.createStore('file_progress');}publicasyncupload(file:File|FileList|DirectoryEntry,path=''){if(isDirectoryEntry(file)){returnthis.uploadDirectory(file,path);}elseif(fileinstanceofFileList){returnthis.uploadFileList(file,path);}else{returnthis.uploadSingleFile(file,path);}}privateasyncuploadSingleFile(file:File,relativePath:string){constfileId=this.generateFileId(file,relativePath);consttotalChunks=Math.ceil(file.size/this.options.chunkSize);// 恢复进度constprogress=awaitthis.getProgress(fileId)||{uploadedChunks:[],failedChunks:[]};// 并行上传控制constuploadQueue=newUploadQueue(this.options.maxRetry);for(leti=0;i<totalChunks;i++){if(progress.uploadedChunks.includes(i))continue;uploadQueue.addTask(async()=>{constchunk=this.getFileChunk(file,i);constencrypted=this.encryptChunk(chunk);try{awaitapi.uploadChunk(fileId,i,encrypted);awaitthis.updateProgress(fileId,i);}catch(err){throwerr;}});}awaituploadQueue.complete();awaitapi.completeUpload(fileId,totalChunks);}// 文件夹上传实现privateasyncuploadDirectory(dir:DirectoryEntry,basePath=''){constreader=dir.createReader();constentries=awaitnewPromise((resolve)=>{reader.readEntries(resolve);});for(constentryofentries){if(entry.isDirectory){awaitthis.uploadDirectory(entry,`${basePath}/${entry.name}`);}else{constfile=awaitnewPromise((resolve)=>entry.file(resolve));awaitthis.uploadSingleFile(file,basePath);}}}}

后端核心代码 (.NET Core)

// FileUploadController.cs[ApiController][Route("api/upload")]publicclassFileUploadController:ControllerBase{privatereadonlyIUploadService_uploadService;privatereadonlyIDbAdapter_dbAdapter;publicFileUploadController(IUploadServiceuploadService,IDbAdapterdbAdapter){_uploadService=uploadService;_dbAdapter=dbAdapter;}[HttpPost("chunk")]publicasyncTaskUploadChunk([FromForm]ChunkUploadRequestrequest){// 解密数据块vardecryptedData=CryptoHelper.Decrypt(request.EncryptedData,request.Algorithm);// 存储到临时位置vartempPath=await_uploadService.SaveChunk(request.FileId,request.ChunkIndex,decryptedData);// 记录数据库await_dbAdapter.RecordChunk(request.FileId,request.ChunkIndex,tempPath);returnOk(new{success=true});}[HttpPost("complete")]publicasyncTaskCompleteUpload([FromBody]CompleteUploadRequestrequest){// 验证所有分片varallChunksReceived=await_dbAdapter.VerifyChunks(request.FileId,request.TotalChunks);if(!allChunksReceived){returnBadRequest("Missing chunks");}// 合并文件varlocalPath=await_uploadService.MergeChunks(request.FileId,request.TotalChunks);// 加密存储到OBSvarobsKey=await_uploadService.TransferToOBS(localPath,request.StorageEncryption);// 清理临时文件await_uploadService.CleanTempFiles(request.FileId);// 记录文件元数据await_dbAdapter.RecordFileMetadata(request.FileId,obsKey,request.OriginalFileName,request.FileSize);returnOk(new{success=true,fileId=request.FileId});}}

数据库适配层设计

// 数据库适配器接口publicinterfaceIDbAdapter{TaskRecordChunk(stringfileId,intchunkIndex,stringtempPath);TaskVerifyChunks(stringfileId,inttotalChunks);TaskRecordFileMetadata(stringfileId,stringstorageKey,stringfileName,longfileSize);}// MySQL实现publicclassMySqlDbAdapter:IDbAdapter{privatereadonlystring_connectionString;publicMySqlDbAdapter(IConfigurationconfig){_connectionString=config.GetConnectionString("MySQL");}publicasyncTaskRecordChunk(stringfileId,intchunkIndex,stringtempPath){usingvarconnection=newMySqlConnection(_connectionString);varsql=@"INSERT INTO file_chunks (file_id, chunk_index, temp_path, created_at) VALUES (@fileId, @chunkIndex, @tempPath, NOW()) ON DUPLICATE KEY UPDATE temp_path = VALUES(temp_path)";varaffected=awaitconnection.ExecuteAsync(sql,new{fileId,chunkIndex,tempPath});returnaffected>0;}}// 达梦数据库实现publicclassDmDbAdapter:IDbAdapter{// 达梦特定的实现...}

关键技术解决方案

1. IE8及信创浏览器兼容方案

// browser-detector.tsexportfunctiongetUploadHandler(){if(supportsFileApi()){returnnewModernUploader();}// 信创浏览器检测if(isXinChuangBrowser()){returngetXinChuangAdapter();}// IE8检测if(isIE8()){returnnewIE8Uploader({flashSwfPath:'/assets/uploader.swf',activeXControl:'FileUploader.Ctrl.1'});}thrownewError('Unsupported browser environment');}// 信创浏览器适配器工厂functiongetXinChuangAdapter(){constua=navigator.userAgent;if(ua.includes('Loongson')){returnnewLoongsonUploader();}if(ua.includes('RedLotus')){returnnewRedLotusUploader();}// 其他信创浏览器适配...}

2. 断点续传可靠性增强

// progress-manager.tsclassProgressManager{privatestaticreadonlySTORAGE_KEY='upload_progress';constructor(privatefileId:string){}asyncsaveProgress(chunkIndex:number){// 内存缓存progressCache[this.fileId]=progressCache[this.fileId]||[];progressCache[this.fileId].push(chunkIndex);// LocalStorageconstlsProgress=this.getLocalProgress();lsProgress[this.fileId]=lsProgress[this.fileId]||[];lsProgress[this.fileId].push(chunkIndex);localStorage.setItem(STORAGE_KEY,JSON.stringify(lsProgress));// IndexedDBawaitthis.db.update('file_progress',{fileId:this.fileId,chunks:[...newSet([...progressCache[this.fileId]])]});// 服务端同步（节流）this.debouncedSyncToServer();}privatedebouncedSyncToServer=debounce(async()=>{awaitapi.syncProgress(this.fileId,progressCache[this.fileId]);},5000);}

3. 多数据库动态配置

// Program.cs// 数据库配置builder.Services.AddSingleton(provider=>{varconfig=provider.GetRequiredService();vardbType=config["Database:Type"];returndbTypeswitch{"MySQL"=>newMySqlDbAdapter(config),"SQLServer"=>newSqlServerDbAdapter(config),"Dameng"=>newDmDbAdapter(config),"Kingbase"=>newKingbaseDbAdapter(config),_=>thrownewException($"Unsupported database type:{dbType}")};});