.NET MVC如何整合前端框架实现大文件上传？

作为福建某互联网上市公司项目负责人，我近期正为“大文件传输功能集成”课题带领团队攻坚——公司现有产品已服务金融、能源、政务等领域的200+客户，其中超30%的国企、央企客户明确提出“100G+大文件传输+文件夹层级保留+断点续传”的刚性需求。但市场上多数开源组件（如WebUploader）因停更、不支持IE8、无技术支持等问题无法落地，自主研发又面临“兼容多技术栈+加密合规+高并发稳定”的三重挑战。

我们的需求清单（直击业务痛点）

1. 大文件传输能力：单文件100G+，文件夹保留完整层级（含10万+子文件场景），断点续传（刷新/关闭浏览器后进度不丢失）。
2. 安全合规：传输层HTTPS加密，存储层支持SM4/AES国密算法（可配置），密钥由客户自主管理。
3. 兼容与稳定：兼容IE8（Windows 7老终端）、Chrome/Firefox等主流浏览器；后端同时支持ASP.NET WebForm/.NET Core；前端兼容vue2/vue3/React。
4. 轻量集成：无缝嵌入现有业务流程，不修改原有数据结构和系统逻辑（避免“为传文件重构系统”）。
5. 性能兜底：下载非打包方案（防服务器内存爆炸），支持10万+文件并发下载（单服务器承载≥50用户）。
6. 可维护性：供应商需提供5年以上技术支持，附带5+央企/国企合作案例（合同、软著、信创认证等），降低决策风险。

我们的技术方案（从架构到落地）

经过6个月调研、3轮内部测试（含国企客户场景验证），我们最终采用“分片上传+元数据管理+国密加密”的核心架构，结合阿里云OSS的扩展能力，同时兼容新旧技术栈。以下是关键实现细节：

一、整体架构设计

graph TD A[前端] --> B[分片上传/下载] B --> C{断点续传检查} C -->|已上传分片| D[跳过上传] C -->|未上传分片| E[加密分片并上传] E --> F[后端接收分片] F --> G[存储至OSS/本地] G --> H[记录元数据（SQL Server）] H --> I[合并分片] I --> J[更新进度状态] K[下载请求] --> L[校验权限+获取分片列表] L --> M[流式下载分片（OSS/本地）] M --> N[自动解密分片] N --> O[前端合并分片] O --> P[还原文件夹层级]

二、关键技术实现（附代码示例）

1. 前端：跨框架分片上传（兼容IE8+）

（基于原生JS封装，支持vue2/vue3/React，IE8使用XHR+iframe fallback）

// utils/FileUploader.js（核心上传逻辑）classFileUploader{constructor(options){this.chunkSize=options.chunkSize||5*1024*1024;// 5MB分片（100G分20000片）this.file=options.file;this.folderId=options.folderId;// 文件夹ID（保留层级）this.uploadId=options.uploadId||uuidv4();// 全局唯一上传ID（断点续传标识）this.progressCallback=options.progressCallback;this.onSuccess=options.onSuccess;this.onError=options.onError;this.isIE8=/*@cc_on@*/false||!!document.documentMode===8;// IE8检测}// 初始化：检查已上传分片asyncinit(){constres=awaitthis.httpGet(`/api/upload/check?uploadId=${this.uploadId}`);this.uploadedChunks=newSet(res.data.uploadedChunks);this.totalChunks=Math.ceil(this.file.size/this.chunkSize);}// 上传单个分片（兼容IE8）asyncuploadChunk(chunkIndex){conststart=chunkIndex*this.chunkSize;constend=Math.min(start+this.chunkSize,this.file.size);constchunk=this.file.slice(start,end);// 加密分片（AES/SM4，密钥从后端获取）const{encryptedChunk,iv}=awaitthis.encryptChunk(chunk);// 构造请求参数constparams={uploadId:this.uploadId,chunkIndex,totalChunks:this.totalChunks,fileName:this.file.name,folderId:this.folderId,iv:iv// SM4需要IV，AES可选};// 发送分片（IE8用XHR+iframe，现代浏览器用Fetch）constformData=newFormData();Object.entries(params).forEach(([k,v])=>formData.append(k,v));formData.append('chunk',encryptedChunk);try{constres=this.isIE8?awaitthis.ie8Upload(formData):awaitthis.httpPost('/api/upload/chunk',formData);if(res.code===200){this.uploadedChunks.add(chunkIndex);this.progressCallback((this.uploadedChunks.size/this.totalChunks)*100);}}catch(err){this.onError(`分片${chunkIndex}上传失败：${err.message}`);}}// 触发合并分片asyncmerge(){constres=awaitthis.httpPost('/api/upload/merge',{uploadId:this.uploadId,fileName:this.file.name,folderId:this.folderId,totalChunks:this.totalChunks});if(res.code===200){this.onSuccess(res.data.fileId);// 返回文件唯一ID}}// 加密分片（AES示例，SM4需替换为BouncyCastle实现）asyncencryptChunk(chunk){constkey=awaitthis.httpGet('/api/config/encryptKey');// 从后端获取客户密钥constiv=crypto.getRandomValues(newUint8Array(16));// SM4需要128位IV// AES加密（实际SM4需调用国密库）constaes=CryptoJS.AES.encrypt(CryptoJS.lib.WordArray.create(chunk),CryptoJS.enc.Hex.parse(key),{iv:CryptoJS.enc.Hex.parse(Array.from(iv).map(b=>b.toString(16).padStart(2,'0')).join(''))});return{encryptedChunk:newBlob([iv,aes.toString()],{type:'application/octet-stream'}),iv:Array.from(iv).map(b=>b.toString(16).padStart(2,'0')).join('')};}// IE8专用上传（XHR+iframe）ie8Upload(formData){returnnewPromise((resolve,reject)=>{constiframe=document.createElement('iframe');iframe.style.display='none';constform=document.createElement('form');form.method='post';form.enctype='multipart/form-data';form.action='/api/upload/chunk';Object.entries(formData).forEach(([name,value])=>{constinput=document.createElement('input');input.type='hidden';input.name=name;input.value=value;form.appendChild(input);});iframe.onload=()=>{constresponse=JSON.parse(iframe.contentWindow.document.body.innerText);response.code===200?resolve():reject(response.msg);};document.body.appendChild(iframe);form.submit();document.body.removeChild(iframe);});}// 启动上传（控制并发防浏览器崩溃）asyncstart(concurrency=3){awaitthis.init();constchunksToUpload=Array.from({length:this.totalChunks},(_,i)=>i).filter(i=>!this.uploadedChunks.has(i));// 分片并发上传（避免浏览器内存溢出）for(leti=0;i<chunksToUpload.length;i+=concurrency){constbatch=chunksToUpload.slice(i,i+concurrency);awaitPromise.all(batch.map(chunkIndex=>this.uploadChunk(chunkIndex)));}awaitthis.merge();}// 工具方法：HTTP请求封装httpGet(url){/* ... */}httpPost(url,data){/* ... */}}// 使用示例（vue3组件）exportdefault{methods:{asynchandleFileSelect(file){constuploader=newFileUploader({file,folderId:this.currentFolder.id,chunkSize:5*1024*1024,progressCallback:(p)=>this.progress=p,onSuccess:(fileId)=>{this.$message.success(`文件${file.name}上传成功，ID：${fileId}`);},onError:(err)=>this.$message.error(err)});awaituploader.start();}}};

2. 后端：ASP.NET WebForm/.NET Core 双栈支持（分片管理+加密存储）

（核心逻辑兼容新旧技术栈，SQL Server记录元数据，阿里云OSS存储文件）

// 公共接口层（WebForm/.NET Core通用）publicinterfaceIFileUploadService{TaskCheckChunksAsync(stringuploadId);TaskUploadChunkAsync(UploadChunkRequestrequest);TaskMergeChunksAsync(MergeChunksRequestrequest);}// ASP.NET WebForm 实现（UploadService.ashx）publicclassUploadService:IHttpHandler,IFileUploadService{privatereadonlyIUnitOfWork_unitOfWork;// Dapper封装数据库操作privatereadonlyIOssClient_ossClient;// 阿里云OSS客户端publicasyncTaskCheckChunksAsync(stringuploadId){using(varconn=newSqlConnection(_config["DbConnection"])){varuploadedChunks=awaitconn.QueryAsync("SELECT ChunkIndex FROM FileUploadProgress WHERE UploadId = @UploadId",new{UploadId=uploadId});returnnewUploadCheckResult{UploadedChunks=uploadedChunks.ToList()};}}publicasyncTaskUploadChunkAsync(UploadChunkRequestrequest){// 保存分片到临时目录（或直接上传OSS）vartempPath=Path.Combine(_env.WebRootPath,"temp",request.UploadId);Directory.CreateDirectory(tempPath);varchunkPath=Path.Combine(tempPath,$"{request.ChunkIndex}.dat");using(varfs=newFileStream(chunkPath,FileMode.Create)){awaitrequest.Chunk.CopyToAsync(fs);}// 记录分片进度到数据库using(varconn=newSqlConnection(_config["DbConnection"])){awaitconn.ExecuteAsync(@" IF NOT EXISTS(SELECT 1 FROM FileUploadProgress WHERE UploadId = @UploadId AND ChunkIndex = @ChunkIndex) INSERT INTO FileUploadProgress (UploadId, ChunkIndex, FolderId) VALUES (@UploadId, @ChunkIndex, @FolderId)",request);}}publicasyncTaskMergeChunksAsync(MergeChunksRequestrequest){vartempPath=Path.Combine(_env.WebRootPath,"temp",request.UploadId);varfinalFile=await_ossClient.PutObjectAsync(_config["OssBucket"],$"{request.FolderId}/{request.FileName}",tempPath);// 清理临时文件和数据库记录Directory.Delete(tempPath,true);using(varconn=newSqlConnection(_config["DbConnection"])){awaitconn.ExecuteAsync("DELETE FROM FileUploadProgress WHERE UploadId = @UploadId",new{UploadId=request.UploadId});}// 记录文件元数据（关联业务系统）varfileId=Guid.NewGuid().ToString();await_unitOfWork.FileRecords.AddAsync(newFileRecord{Id=fileId,Name=request.FileName,FolderId=request.FolderId,Size=finalFile.ContentLength,OssKey=finalFile.Key,UploadTime=DateTime.UtcNow});await_unitOfWork.SaveChangesAsync();returnnewMergeResult{FileId=fileId};}}// .NET Core 版本（使用依赖注入）publicclassUploadController:ControllerBase{privatereadonlyIFileUploadService_uploadService;[HttpPost("check")]publicasyncTaskCheckChunks([FromQuery]stringuploadId){varresult=await_uploadService.CheckChunksAsync(uploadId);returnOk(result);}[HttpPost("chunk")]publicasyncTaskUploadChunk([FromForm]IFormFilechunk){varrequest=newUploadChunkRequest{UploadId=Request.Form["uploadId"],ChunkIndex=int.Parse(Request.Form["chunkIndex"]),TotalChunks=int.Parse(Request.Form["totalChunks"]),FolderId=Request.Form["folderId"],Chunk=chunk.OpenReadStream()};await_uploadService.UploadChunkAsync(request);returnOk();}}

3. 下载功能：非打包+自动解密（防服务器崩溃）

（通过分片流式下载+前端合并，支持10万+文件并发）

// 前端下载逻辑（通用组件）methods:{asyncdownloadFolder(folderId){// 获取文件夹结构（含文件列表）const{data:folder}=awaitthis.$http.get(`/api/folders/${folderId}`);constfiles=folder.files;// 控制并发（防止服务器压力过大）constconcurrency=5;for(leti=0;i<files.length;i+=concurrency){constbatch=files.slice(i,i+concurrency);awaitPromise.all(batch.map(async(file)=>{// 获取文件分片列表（从数据库/缓存获取）const{data:chunks}=awaitthis.$http.get(`/api/files/${file.id}/chunks`);// 流式下载分片并解密constdecryptedChunks=[];for(constchunkofchunks){constres=awaitthis.$http.get(`/api/files/chunk/${chunk.id}`,{responseType:'blob'});decryptedChunks.push(awaitthis.decryptChunk(res.data));}// 合并分片并保存constmergedBlob=newBlob(decryptedChunks);this.saveAs(mergedBlob,file.name);// 使用FileSaver.js保存}));}},// 解密分片（SM4示例，需引入国密库如gm-crypt）asyncdecryptChunk(encryptedBlob){constkey=awaitthis.$http.get('/api/config/decryptKey');// 客户密钥constiv=awaitthis.getIvFromHeader(encryptedBlob);// 从Blob头获取IV// 读取加密数据constarrayBuffer=awaitencryptedBlob.arrayBuffer();constdata=arrayBuffer.slice(16);// 前16字节为IV// SM4解密（使用gm-crypt）constsm4=newSM4({key:Uint8Array.from(atob(key),c=>c.charCodeAt(0))});constdecrypted=sm4.decrypt(data,iv);returnnewBlob([decrypted]);},// 保存文件到本地saveAs(blob,fileName){consturl=URL.createObjectURL(blob);consta=document.createElement('a');a.href=url;a.download=fileName;a.click();URL.revokeObjectURL(url);}}

我们的合作保障（降低客户风险）

1. 技术兜底：提供7*24小时专属技术支持（电话/企业微信/现场驻场），核心问题2小时内响应；针对国企客户，可安排原厂工程师驻场调试。
2. 资质齐全：可提供5+央企/国企合作案例（含某能源集团、某省级银行的大文件传输项目合同原件、软件著作权证书、信创环境认证报告、银行转账凭证）。
3. 灵活授权：按年授权（20万/年，不限项目数），支持私有部署/公有云/混合云，适配SQL Server/MySQL/Oracle；提供定制化开发服务（如对接客户现有CA认证系统）。
4. 无缝集成：提供Vue2/Vue3/React组件库、ASP.NET WebForm/.NET Core SDK，文档覆盖“开箱即用”到“深度定制”（含IE8兼容配置指南）。

如果贵司正在寻找“稳定、安全、可维护”的大文件传输方案，我们可提供：

• 免费测试环境：含10G文件上传/下载的DEMO（支持IE8测试）；
• 客户现场考察：某省级电力集团的落地案例（日均处理500+100G文件传输）；
• 定制化方案评审：3个工作日内输出与贵司现有技术栈（如OSS私有部署、信创环境）的适配方案。

期待与您合作，共同解决“大文件传输”这一技术硬骨头！

（联系人：XXX 电话：XXX-XXXX-XXXX 邮箱：XXX@XXX.com）

设置框架

安装.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

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载完整示例

下载完整示例