网页页面如何设计.NET Core大文件上传的拖拽与批量选择？

大文件传输系统开发方案

项目背景与需求分析

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

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

技术方案设计

系统架构

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

前端技术选型

1. 核心上传组件：基于Vue3 Composition API封装的自研组件
2. 分片策略：动态分片（10MB基础分片，根据网络质量自动调整）
3. 断点续传：LocalStorage + IndexedDB + 服务端校验三保险
4. 浏览器兼容：
   • 现代浏览器：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}")};});

部署与优化建议

1. 服务器配置：

   • 增加临时文件存储空间（至少为最大文件大小的2倍）
   • 调整IIS/Kestrel上传限制

2. 前端优化：

   • 实现分片并行上传（3-5个并发）
   • 增加上传速度动态调整算法
   • 实现内存清理机制，避免大文件导致的内存溢出

3. 监控与日志：

   • 实现上传过程详细日志记录
   • 添加性能监控指标（吞吐量、成功率等）
   • 设置自动告警机制（失败率阈值）

项目总结

本方案针对超大规模文件传输场景提出了一套完整的技术解决方案，具有以下优势：

1. 全面兼容：覆盖从IE8到现代浏览器及各种信创环境
2. 高度可靠：三重进度保存机制确保断点续传可靠性
3. 灵活扩展：模块化设计支持多种数据库和存储后端
4. 安全保障：传输与存储全程加密，符合等保要求

建议开发过程中重点关注以下测试场景：

• 不同网络条件下的传输稳定性测试
• 各种信创环境的兼容性验证
• 极端情况下的错误恢复测试
• 长时间大负载压力测试

整个系统预计需要6-8周完成核心功能开发，建议采用分阶段交付策略，优先确保基础文件传输功能的稳定性，再逐步扩展文件夹传输等高级功能。

设置框架

目标框架选择8.0

IDE使用VS2022

编译项目

修改测试端口

修改项目测试端口

访问测试页面

NOSQL

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

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载完整示例

已经上传到gitee了，可以直接下载

下载完整示例