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:path+entry.name,isFile:entry.isFile}if(entry.isFile){item.file=entry items.push(item)}else{items.push({...item,children:awaitscanFolder(awaitreadDirectory(entry),path+entry.name+'/')})}}returnitems}2. 断点续传持久化设计
采用三级缓存机制确保可靠性：
- IndexedDB：存储分片二进制数据（现代浏览器）
- localStorage：存储元信息（兼容IE8）
- 服务端校验：最终一致性保障
// C# 断点状态服务publicclassUploadStateService{privatereadonlystring_connStr;publicasyncTaskGetStateAsync(stringfileKey){usingvarconn=newSqlConnection(_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){varobjects=await_ossService.ListObjectsAsync(path);varmanifest=objects.Select(o=>new{Key=o.Key,Url=_ossService.GeneratePresignedUrl(o.Key)});returnJson(new{Type="folder",Manifest=manifest,BasePath=path});}前端处理逻辑：
// download-manager.jsexportconstdownloadFolder=async(manifest)=>{for(constitemofmanifest){constrelativePath=item.Key.replace(manifest.BasePath,'')awaitcreateLocalDirectory(relativePath)constresponse=awaitfetch(item.Url)constblob=awaitresponse.blob()saveAs(blob,relativePath.split('/').pop())}}IE8兼容性魔改实录
在QQ群（374992201）里与几位前辈探讨后，采用以下黑科技：
// ie8-compat.jsdocument.attachEvent('onclick',function(){if(window.ActiveXObject){// 使用古老的FileSystemObjectvarfso=newActiveXObject("Scripting.FileSystemObject")varfolder=fso.GetFolder(selectedPath)traverseFolder(folder)}})functiontraverseFolder(folder){varfiles=newEnumerator(folder.files)for(;!files.atEnd();files.moveNext()){postFile(files.item())}varsubfolders=newEnumerator(folder.subfolders)for(;!subfolders.atEnd();subfolders.moveNext()){traverseFolder(subfolders.item())}}项目进度与反思
- ✅ 已完成：
- 文件夹元数据采集方案
- 基础分片上传功能
- ⏳ 进行中：
- 断点状态同步逻辑
- OSS直传优化
- ❗ 风险点：
- IE8的ActiveX安全策略可能导致功能受限
- 超深层级文件夹的性能问题
深夜的键盘声格外清晰，这个项目让我深刻体会到——兼容IE8就像考古学家修复青铜器，需要特殊的工具和极大的耐心。明天将继续完善分片合并逻辑，或许该考虑引入Web Worker来避免界面卡顿…
（文档持续更新中，完整代码请关注QQ群文件更新）
设置框架
安装.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
创建数据库
配置数据库连接信息
检查数据库配置
访问页面进行测试
相关参考：
文件保存位置，
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
下载完整示例
下载完整示例
