2023年X月X日 开发日志 - 大文件传输系统攻坚实录凌晨1:30合肥的暴雨敲打着窗户我正在为这个极具挑战的外包项目设计技术方案。客户的需求相当硬核——基于WebUploader实现20G级文件夹传输还要兼容IE8这个上古神器。泡了杯浓茶记录下今天的突破性进展。核心问题拆解文件夹结构保持WebUploader原生只支持文件选择IE8兼容性现代API如FileSystem API完全不可用断点持久化需要跨越浏览器会话的进度保存非打包下载避免服务器压缩数万文件的性能灾难关键技术突破1. 文件夹结构采集方案通过分析Windows/MacOS的目录选择行为发现隐藏的webkitdirectory属性配套的Vue3处理逻辑// folder-processor.jsexportconstscanFolder(entries,path){constitems[]for(constentryofentries){constitem{path:pathentry.name,isFile:entry.isFile}if(entry.isFile){item.fileentry items.push(item)}else{items.push({...item,children:awaitscanFolder(awaitreadDirectory(entry),pathentry.name/)})}}returnitems}2. 断点续传持久化设计采用三级缓存机制确保可靠性IndexedDB存储分片二进制数据现代浏览器localStorage存储元信息兼容IE8服务端校验最终一致性保障// C# 断点状态服务publicclassUploadStateService{privatereadonlystring_connStr;publicasyncTaskGetStateAsync(stringfileKey){usingvarconnnewSqlConnection(_connStr);returnawaitconn.QueryFirstOrDefaultAsync(SELECT * FROM UploadStates WHERE FileKey fileKey AND UserId userId,new{fileKey,UserContext.Current.UserId});}publicasyncTaskSaveChunkAsync(FileChunkchunk){// 采用UPSERT模式varsql MERGE INTO UploadChunks AS target USING (VALUES (chunkId, fileKey, chunkNumber)) AS source(...) ON target.ChunkId source.chunkId WHEN MATCHED THEN UPDATE SET ... WHEN NOT MATCHED THEN INSERT (...) VALUES (...);awaitconn.ExecuteAsync(sql,chunk);}}3. 非打包下载实现利用阿里云OSS的列举和签名机制// FileController.cs[HttpGet(download)]publicasyncTaskDownloadFolder(stringpath){varobjectsawait_ossService.ListObjectsAsync(path);varmanifestobjects.Select(onew{Keyo.Key,Url_ossService.GeneratePresignedUrl(o.Key)});returnJson(new{Typefolder,Manifestmanifest,BasePathpath});}前端处理逻辑// download-manager.jsexportconstdownloadFolderasync(manifest){for(constitemofmanifest){constrelativePathitem.Key.replace(manifest.BasePath,)awaitcreateLocalDirectory(relativePath)constresponseawaitfetch(item.Url)constblobawaitresponse.blob()saveAs(blob,relativePath.split(/).pop())}}IE8兼容性魔改实录在QQ群374992201里与几位前辈探讨后采用以下黑科技// ie8-compat.jsdocument.attachEvent(onclick,function(){if(window.ActiveXObject){// 使用古老的FileSystemObjectvarfsonewActiveXObject(Scripting.FileSystemObject)varfolderfso.GetFolder(selectedPath)traverseFolder(folder)}})functiontraverseFolder(folder){varfilesnewEnumerator(folder.files)for(;!files.atEnd();files.moveNext()){postFile(files.item())}varsubfoldersnewEnumerator(folder.subfolders)for(;!subfolders.atEnd();subfolders.moveNext()){traverseFolder(subfolders.item())}}项目进度与反思✅ 已完成文件夹元数据采集方案基础分片上传功能⏳ 进行中断点状态同步逻辑OSS直传优化❗ 风险点IE8的ActiveX安全策略可能导致功能受限超深层级文件夹的性能问题深夜的键盘声格外清晰这个项目让我深刻体会到——兼容IE8就像考古学家修复青铜器需要特殊的工具和极大的耐心。明天将继续完善分片合并逻辑或许该考虑引入Web Worker来避免界面卡顿…文档持续更新中完整代码请关注QQ群文件更新设置框架安装.NET Framework 4.7.2https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472框架选择4.7.2添加3rd引用编译项目NOSQLNOSQL无需任何配置可直接访问页面进行测试SQL使用IIS大文件上传测试推荐使用IIS以获取更高性能。使用IIS Express小文件上传测试可以使用IIS Express创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例