网页上C#如何实现医疗行业的大文件分块上传与加密？

大文件上传系统开发全攻略（兼容IE8的Vue3+WebForm实现）

项目背景

兄弟们，这次接了个硬骨头活儿！客户要我们实现一个支持20G文件上传的系统，还要兼容IE8这种古董浏览器，预算只有100块！不过别慌，咱们程序员不就是喜欢挑战不可能吗？今天就带大家一步步搞定这个项目。

技术选型分析

首先梳理下需求：

前端：Vue3 CLI + 原生JS（因为要兼容IE8）
后端：ASP.NET WebForm（SQL Server）
功能：大文件/文件夹上传下载、加密传输、断点续传
特殊要求：兼容IE8、保留文件夹结构、非打包下载

为什么不用WebUploader？
虽然它是个好库，但IE8兼容性成问题，而且我们要完全控制代码，所以决定原生JS实现。

前端实现（兼容IE8版）

1. 文件选择组件（兼容IE8）

export default { data() { return { fileList: [], chunkSize: 5 * 1024 * 1024, // 5MB分片 isIE8: false } }, mounted() { // 检测IE8 this.isIE8 = this.detectIE8(); // 恢复上传进度 this.restoreUploadProgress(); }, methods: { detectIE8() { const ua = window.navigator.userAgent; return ua.indexOf('MSIE 8.0') > 0 || ua.indexOf('MSIE 7.0') > 0; }, triggerFileInput() { document.getElementById('fileInput').click(); }, triggerFolderInput() { if (this.isIE8) { alert('IE8不支持文件夹上传，请使用现代浏览器或单独上传文件'); return; } document.getElementById('folderInput').click(); }, } }

2. IE8兼容性处理

由于IE8不支持FormData、Blob等现代API，我们需要做兼容处理：

// 在main.js或单独的文件中添加IE8兼容代码if(detectIE8()){// 加载必要的polyfillloadScript('https://cdn.jsdelivr.net/npm/ie8-polyfill@1.0.0/dist/ie8-polyfill.min.js');// 重写XMLHttpRequest以支持大文件上传constoriginalXHR=window.XMLHttpRequest;window.XMLHttpRequest=function(){constxhr=neworiginalXHR();constoriginalSend=xhr.send;xhr.send=function(data){if(datainstanceofFormData){// IE8 FormData处理constform=document.createElement('form');form.style.display='none';document.body.appendChild(form);// 正常发送originalSend.call(xhr,data);};returnxhr;};}

后端实现（ASP.NET WebForm）

1. 文件上传处理（C#）

// FileHandler.ashx.cspublicclassFileHandler:IHttpHandler{privatereadonlystringstoragePath=@"E:\UploadedFiles";privatereadonlystringconnectionString="Your_SQL_Server_Connection_String";publicvoidProcessRequest(HttpContextcontext){context.Response.ContentType="application/json";try{stringaction=context.Request["action"]??context.Request.PathInfo.Trim('/');switch(action.ToLower()){case"getsign":HandleGetSign(context);break;case"uploadchunk":HandleUploadChunk(context);break;case"merge":HandleMerge(context);break;case"download":HandleDownload(context);break;default:context.Response.Write("{\"success\":false,\"message\":\"Invalid action\"}");break;}}catch(Exceptionex){}}}

2. 数据库表设计（SQL Server）

-- 上传主表CREATETABLEUploads(IdINTIDENTITY(1,1)PRIMARYKEY,UploadId NVARCHAR(50)NOTNULLUNIQUE,FileName NVARCHAR(255)NOTNULL,FullPath NVARCHAR(1000)NOTNULL,FileSizeBIGINTNOTNULL,ChunksINTNOTNULL,StatusNVARCHAR(20)NOTNULLDEFAULT'uploading',CreatedDateDATETIMENOTNULL,CompletedDateDATETIMENULL,UserId NVARCHAR(50)NULL-- 如果有用户系统);-- 上传分片表CREATETABLEUploadChunks(IdINTIDENTITY(1,1)PRIMARYKEY,UploadId NVARCHAR(50)NOTNULL,ChunkIndexINTNOTNULL,StatusNVARCHAR(20)NOTNULLDEFAULT'pending',CreatedDateDATETIMENOTNULL,UpdateDateDATETIMENOTNULL,FOREIGNKEY(UploadId)REFERENCESUploads(UploadId));-- 文件元数据表CREATETABLEFiles(IdINTIDENTITY(1,1)PRIMARYKEY,FilePath NVARCHAR(1000)NOTNULLUNIQUE,FileName NVARCHAR(255)NOTNULL,FileSizeBIGINTNOTNULL,UploadDateDATETIMENOTNULLDEFAULTGETDATE(),LastModifiedDATETIMENOTNULLDEFAULTGETDATE(),IsDirectoryBITNOTNULLDEFAULT0,ParentPath NVARCHAR(1000)NULL,UserId NVARCHAR(50)NULL);

加密传输和存储实现

1. 前端加密（使用AES简化版）

// crypto.js - 简化版AES加密（实际项目应该使用更完整的库）functionencryptData(data,password){// 实际项目中应该使用Web Crypto API或引入crypto-js等库// 这里只是示例，实际IE8兼容的加密需要更复杂的实现// 简单示例：使用XOR"加密"（实际项目中不要这样用！）if(typeofdata==='string'){letresult='';for(leti=0;i<data.length;i++){result+=String.fromCharCode(data.charCodeAt(i)^password.charCodeAt(i%password.length));}returnresult;}returndata;}

2. 后端解密和存储加密

// 在FileHandler.ashx.cs中添加privatebyte[]DecryptData(byte[]data,stringpassword){// 实际项目应该使用AES等强加密算法// 这里只是示例，与前端的XOR"加密"对应byte[]result=newbyte[data.Length];for(inti=0;i<data.Length;i++){result[i]=(byte)(data[i]^password[i%password.Length]);}returnresult;}

部署和配置

1. IIS配置要点

上传大小限制：在web.config中添加：

超时设置：在IIS管理器中：
- 应用程序池 -> 高级设置 -> 闲置超时(分钟) 设为 0（不超时）
- 连接超时设为较大值

2. 前端构建配置

在vue.config.js中：

module.exports={publicPath:'./',// 相对路径outputDir:'dist',assetsDir:'static',configureWebpack:{target:['web','es5'],// 兼容IE8module:{rules:[{test:/\.js$/,exclude:/node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,use:{loader:'babel-loader',options:{presets:[['@babel/preset-env',{useBuiltIns:'usage',corejs:3,targets:{ie:'8'}}]]}}}]}},chainWebpack:config=>{// 兼容IE8的polyfillconfig.entry('main').add('babel-polyfill')}}

完整系统架构图

客户端 (IE8/现代浏览器) ├─ Vue3前端 (兼容IE8) │ ├─ 文件选择组件 │ ├─ 分片上传逻辑 │ ├─ 进度保存与恢复 │ └─ 加密处理 │ └─ 原生JS后备方案 ├─ IE8兼容的表单提交 ├─ iframe上传处理 └─ 进度轮询机制 服务器 (IIS) ├─ ASP.NET WebForm后端 │ ├─ 文件分片接收 │ ├─ 数据库记录 │ └─ 合并处理 │ └─ 文件存储系统 ├─ 临时分片存储 (E:\temp) └─ 正式文件存储 (E:\UploadedFiles) 数据库 (SQL Server) ├─ Uploads表 (上传记录) ├─ UploadChunks表 (分片记录) └─ Files表 (文件元数据)

开发文档要点

系统功能
- 大文件分片上传（5MB/片）
- 文件夹结构保留
- 断点续传
- 加密传输和存储
- 多浏览器兼容
API接口
- /api/file/getSign- 获取上传签名
- /api/file/uploadChunk- 上传分片
- /api/file/merge- 合并文件
- /api/file/download- 下载文件
部署说明
- IIS配置要求
- 数据库初始化脚本
- 存储路径权限设置
兼容性说明
- IE8特殊处理
- 现代浏览器优化
- 降级方案