大文件上传的原理是什么？如何实现？

2023年X月X日 开发日志 - 大文件传输系统攻坚实录

凌晨1:30，合肥的暴雨敲打着窗户，我正在为这个极具挑战的外包项目设计技术方案。客户的需求相当硬核——基于WebUploader实现20G级文件夹传输，还要兼容IE8这个"上古神器"。泡了杯浓茶，记录下今天的突破性进展。

核心问题拆解

1. 文件夹结构保持：WebUploader原生只支持文件选择
2. IE8兼容性：现代API如FileSystem API完全不可用
3. 断点持久化：需要跨越浏览器会话的进度保存
4. 非打包下载：避免服务器压缩数万文件的性能灾难

关键技术突破

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. 断点续传持久化设计

采用三级缓存机制确保可靠性：

1. IndexedDB：存储分片二进制数据（现代浏览器）
2. localStorage：存储元信息（兼容IE8）
3. 服务端校验：最终一致性保障

// 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

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载完整示例

下载完整示例