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

汽车制造企业如何用ASP.NET实现文件夹上传？

news 2026/3/26 19:52:59

开发日记：大文件上传系统攻坚记
日期：2023年XX月XX日
天气：晴（但心情像在调试IE8的阴天）

一、需求拆解：从"不可能"到"可能"

客户的需求像一座高山：

20G文件传输（阿里云OSS单文件上限5TB，但浏览器内存是瓶颈）
IE8兼容（默默掏出XDomainRequest和ActiveXObject的祖传代码）
文件夹层级保留（需递归处理``的FileSystemEntryAPI）
断点续传+加密（分片上传+本地存储恢复点+Web Crypto API）

技术选型：
放弃WebUploader（IE8支持不足），选择原生JS+H5 File API
加密方案：SM4/AES通过forge.js兼容旧浏览器
断点续传：localStorage+服务端分片记录

二、前端核心代码：文件夹上传与断点续传

1. 文件夹上传（递归扫描）

// 获取文件夹所有文件（兼容IE10+，IE8需ActiveX降级方案）asyncfunctionscanDirectory(directory){constfiles=[];conststack=[directory];while(stack.length){constentry=stack.pop();if(entry.isFile){files.push(awaitgetFile(entry));}elseif(entry.isDirectory){constreader=entry.createReader();constentries=awaitnewPromise(resolve=>reader.readEntries(resolve));stack.push(...entries);}}returnfiles;}// IE8降级方案（需用户手动选择多个文件）functionhandleIE8Fallback(){constinput=document.createElement('input');input.type='file';input.multiple=true;input.onchange=()=>uploadFiles(input.files);input.click();}

2. 分片上传+断点续传

classChunkUploader{constructor(file,options){this.file=file;this.chunkSize=5*1024*1024;// 5MB/chunkthis.totalChunks=Math.ceil(file.size/this.chunkSize);this.uploadedChunks=JSON.parse(localStorage.getItem(file.name)||'[]');}asyncupload(){for(leti=0;i<this.totalChunks;i++){if(this.uploadedChunks.includes(i))continue;constchunk=this.file.slice(i*this.chunkSize,(i+1)*this.chunkSize);awaitthis.sendChunk(chunk,i);this.uploadedChunks.push(i);localStorage.setItem(this.file.name,JSON.stringify(this.uploadedChunks));}}asyncsendChunk(chunk,index){constformData=newFormData();formData.append('chunk',chunk);formData.append('chunkIndex',index);formData.append('totalChunks',this.totalChunks);formData.append('fileId',btoa(this.file.name+this.file.size));// 唯一标识returnfetch('/api/upload',{method:'POST',body:formData});}}

三、后端C#代码：分片处理与加密存储

1. 分片接收（ASP.NET WebForm）

[WebMethod]publicstaticstringUploadChunk(){HttpPostedFilechunk=HttpContext.Current.Request.Files["chunk"];intindex=int.Parse(HttpContext.Current.Request["chunkIndex"]);stringfileId=HttpContext.Current.Request["fileId"];// 存储分片到临时目录stringtempPath=Path.Combine(Server.MapPath("~/App_Data/Temp"),fileId);Directory.CreateDirectory(tempPath);chunk.SaveAs(Path.Combine(tempPath,index.ToString()));// 检查是否完成if(AllChunksReceived(tempPath,int.Parse(HttpContext.Current.Request["totalChunks"]))){MergeFile(tempPath,fileId);}return"OK";}

2. SM4加密存储（使用BouncyCastle库）

publicstaticvoidEncryptToOSS(Streaminput,stringossKey){varengine=newSM4Engine();varkey=Encoding.UTF8.GetBytes("16-byte-secret-key");engine.Init(true,newKeyParameter(key));using(varossClient=newOssClient(endpoint,accessKeyId,accessKeySecret))using(varcryptoStream=newCryptoStream(input,engine,CryptoStreamMode.Read)){ossClient.PutObject(bucketName,ossKey,cryptoStream);}}

四、踩坑实录

IE8的棺材板快压不住了
- 解决方案：对文件夹上传降级为多文件选择，用swfUpload后备方案
20G文件内存溢出
- 优化：采用FileReader的readAsArrayBuffer分段处理
文件夹层级丢失
- 关键：上传时携带相对路径，如/科研资料/2023/实验报告.pdf

五、部署与协作

阿里云OSS配置：开启断点续传和跨域规则

SQL Server设计：

CREATETABLEFileTransfers(FileIdVARCHAR(255)PRIMARYKEY,OriginalName NVARCHAR(255),OSSPathVARCHAR(255),ChunkCountINT,CompletedChunksVARCHAR(MAX)-- JSON格式存储已上传分片)