news 2026/4/22 16:58:54

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
网页页面如何设计.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了，可以直接下载

下载完整示例









版权声明:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！













网站建设
2026/4/15 16:26:26



Excalidraw图形访问统计功能


Excalidraw图形访问统计功能
在现代技术团队的日常协作中&#xff0c;一张“随手画”的架构草图&#xff0c;可能比十页PPT更能精准传达设计意图。但问题也随之而来&#xff1a;谁看过这张图&#xff1f;谁修改了关键组件&#xff1f;有没有人真正理解它的逻辑&#xff1f;当白…






作者头像
李华














网站建设
2026/4/18 18:44:15



Excalidraw与Airtable数据库联动


Excalidraw与Airtable数据库联动
在产品迭代越来越快的今天&#xff0c;团队常常面临一个尴尬的局面&#xff1a;设计师画完原型后&#xff0c;文档就“死”在了共享链接里。开发翻记录、测试找依据、产品经理对进度——所有人都在不同的系统间跳转&#xff0c;信息像拼图一样散…






作者头像
李华














网站建设
2026/4/21 2:27:28



为什么你的Open-AutoGLM协作总失败？99%的人都忽略了这4个关键点


第一章&#xff1a;Open-AutoGLM协作失败的根源分析在分布式大模型协作推理系统中&#xff0c;Open-AutoGLM的设计初衷是实现多节点间的高效任务调度与语义理解协同。然而&#xff0c;在实际部署过程中&#xff0c;频繁出现协作中断、响应延迟和结果不一致等问题。这些问题的背…






作者头像
李华














网站建设
2026/4/22 4:13:09



为什么90%的Open-AutoGLM部署都忽略了权限审计？现在补救还来得及！


第一章&#xff1a;Open-AutoGLM账号权限管理的现状与挑战随着Open-AutoGLM平台在自动化代码生成与模型调用领域的广泛应用&#xff0c;其账号权限管理体系面临日益复杂的使用场景和安全需求。当前系统采用基于角色的访问控制&#xff08;RBAC&#xff09;模型&#xff0c;用户…






作者头像
李华














网站建设
2026/4/20 21:56:40



从零构建智能回复机器人：基于Open-AutoGLM的7个核心步骤


第一章&#xff1a;智能回复机器人的概念与Open-AutoGLM概述智能回复机器人是一种基于自然语言处理技术&#xff0c;能够理解用户输入并自动生成语义连贯、上下文相关的响应的系统。这类系统广泛应用于客服自动化、社交平台互动以及企业级消息处理等场景。其核心技术依赖于大规…






作者头像
李华














网站建设
2026/4/3 20:07:22



Open-AutoGLM核心技术解析（普通人也能学会的AI文案引擎）


第一章&#xff1a;Open-AutoGLM核心技术解析&#xff08;普通人也能学会的AI文案引擎&#xff09;Open-AutoGLM 是一款面向大众用户的开源 AI 文案生成引擎&#xff0c;基于改进的 GLM 架构构建&#xff0c;具备高效理解与生成中文文本的能力。其设计目标是让非技术人员也能轻…






作者头像
李华