news 2026/6/9 21:20:24

如何讨论大文件上传中的多平台兼容性问题?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何讨论大文件上传中的多平台兼容性问题?

【一个C#外包仔的2G文件上传生死劫:从WebUploader到.NET Core自救指南】


"老板,这个需求…可能需要加钱。“我盯着客户发来的PDF,手指在"支持2G文件批量上传"那行字上疯狂颤抖。作为同时会修打印机和写ASP.NET Core的"全栈艺术家”,我深知这次要面对的是三重暴击:Vue2的兼容性、SQL Server的存储压力,还有那个该死的WebUploader——它现在就像个被拔掉电池的玩具,在控制台里躺着闪红灯。

第一幕:WebUploader的"临终表演"

"看!它动了!"我兴奋地指着屏幕上突然跳到99%的进度条,下一秒Chrome标签页就白屏了。这个百度开源的组件就像个行为艺术家:

  • 分片上传?能工作,但偶尔会把第13片传到火星(后来发现是Nginx的client_max_body_size在作怪)
  • 跨浏览器兼容?在Edge里会表演"进度条卡顿魔术",在Firefox里直接显示"NaN%"
  • 断点续传?客户重启路由器后,所有分片都会集体玩"消失的她"

最绝的是错误处理:

// 前端发来的神秘代码uploader.on('error',function(type){if(type==='F_DUPLICATE'){alert('文件已存在,但后端可能没收到这个消息');}else{console.log('出错了,但我不知道怎么描述');}});

第二幕:.NET Core与Vue2的"跨服聊天"

"前端说需要获取上传速度!"我冲着电话大喊,嘴里还嚼着辣条。后端小哥(其实也是我)的声线透着绝望:“哥,WebUploader的文档比我的C#注释还抽象…”

于是我们开启了量子纠缠式开发:

// 后端API(喝到第五杯咖啡后的产物)[HttpPost("upload-chunk")]publicasyncTaskUploadChunk(IFormFilefile,stringfileHash,intchunkIndex){try{varchunkPath=Path.Combine("uploads",fileHash,$"{chunkIndex}.part");awaitusingvarstream=newFileStream(chunkPath,FileMode.Create);awaitfile.CopyToAsync(stream);// 偶尔会抛出"神秘异常"returnOk(new{success=true});// 其实可能没成功}catch{returnStatusCode(500,"服务器说它累了");}}
// 前端调用(Vue2的魔法)uploadChunk(chunk){constformData=newFormData();formData.append('file',chunk.file);formData.append('fileHash',this.fileHash);formData.append('chunkIndex',chunk.index);axios.post('/api/upload-chunk',formData,{onUploadProgress:()=>{// 这个回调会随机触发3次}});}

第三幕:SQL Server的"内存爆炸"

当客户问"能不能显示所有上传任务的历史记录"时,我盯着那台只有8G内存的云服务器陷入了沉思:

-- 最初的设计(天真版)CREATETABLEUploadTasks(Id UNIQUEIDENTIFIERPRIMARYKEY,FileName NVARCHAR(255),FileSizeBIGINT,-- 2G文件就是2147483648StatusINT,-- 0=上传中 1=完成 2=失败 3=合并中...CreatedAt DATETIME2,-- 省略了5个关联表的设计...);

直到测试时发现:

  1. 插入1000条记录后,查询"进行中的任务"需要2.8秒
  2. 没有给FileHash列加索引(别问我怎么知道的)
  3. 当Nginx超时断开连接时,.NET Core还在傻乎乎地插入分片记录
  4. 合并文件时,FileStream直接吃掉了4G内存

第四幕:绝地求生方案

经过三天三夜的谷歌搜索(和两包卫龙辣条),我制定了新方案:

前端改造计划

  1. 弃用WebUploader,改用uppy.io(至少文档是2024年的)
  2. 实现真正的断点续传:
    // 用IndexedDB存储已上传分片constdbPromise=idb.open('UploadDB',1,upgradeDB=>{upgradeDB.createObjectStore('chunks',{keyPath:'id'});});
  3. 添加心跳检测,防止浏览器假死
  4. 用WebSocket实时显示上传速度(虽然.NET Core的SignalR更香,但学不动啊)

后端自救指南

  1. MemoryMappedFile替代普通FileStream处理大文件:
    // 合并分片时不再吃内存using(varmmf=MemoryMappedFile.CreateFromFile("final.dat",FileMode.Create)){for(inti=0;i<totalChunks;i++){varchunkPath=Path.Combine("uploads",fileHash,$"{i}.part");// 内存映射文件操作...}}
  2. 添加速率限制中间件:
    // 防止客户端疯狂上传app.Use(async(context,next)=>{varclientIp=context.Connection.RemoteIpAddress;varrateLimitKey=$"upload:{clientIp}";// 简单的Redis计数器(实际用StackExchange.Redis)if(redis.Increment(rateLimitKey)>100){context.Response.StatusCode=429;awaitcontext.Response.WriteAsync("慢点,兄弟!");return;}awaitnext();});
  3. 异步处理文件合并:
    // 用Hangfire后台任务_backgroundJobClient.Schedule(()=>MergeFile(fileHash),TimeSpan.FromMinutes(1)// 延迟1分钟合并,给前端时间传完所有分片);

数据库优化

  1. 改用SQL Server的FILESTREAM存储大文件元数据
  2. 添加Redis缓存当前上传任务
  3. 对大文件记录采用"软删除"策略(标记为删除但不真删,怕客户反悔)
  4. 分表策略:
    -- 按年份分表CREATETABLEUploadTasks_2024(-- 结构同主表);

终幕:测试日的疯狂

当客户终于发来测试文件时,我的监控面板是这样的:

  • IIS错误日志:每分钟新增5条"Connection_Abandoned_By_ReqQueue"
  • .NET Core内存占用突破1.8G
  • SQL Server:慢查询日志里全是SELECT * FROM UploadTasks WHERE Status=0

但!当那个2.1G的《Windows 11 ISO》终于显示"上传成功"时,我激动得把可乐打翻在键盘上——至少这次没把服务器宕机,只是让整个办公室的鼠标都变得黏糊糊的…

(客户反馈:IE11下进度条会跳《极乐净土》。我:微笑.jpg 并默默在Nginx配置里加了if ($http_user_agent ~* "MSIE") { return 403; }

设置框架

安装.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

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试


相关参考:
文件保存位置,

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

文件下载支持离线保存进度信息,刷新页面,关闭页面,重启系统均不会丢失进度信息。

文件夹下载

支持下载文件夹,并保留层级结构,不打包,不占用服务器资源。

下载完整示例

下载完整示例

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/28 16:07:11

快速搭建eyou邮件系统指南

搭建eyou邮件系统的步骤 准备环境 确保服务器满足以下要求&#xff1a;操作系统推荐使用Linux&#xff08;如CentOS 7/8&#xff09;&#xff0c;内存至少4GB&#xff0c;硬盘空间20GB以上。安装必要的依赖包如MySQL、Nginx、PHP&#xff08;7.2&#xff09;及扩展模块&#x…

作者头像 李华
网站建设 2026/6/9 18:26:15

Github 分析了 2500+ 个仓库后,发现大多数 agents.md 都写错了

Github 分析了 2500 个仓库后&#xff0c;发现大多数 agents.md 都写错了 目标读者&#xff1a;使用 AI 编码助手&#xff08;GitHub Copilot、Claude Code、Cursor 等&#xff09;的开发者 核心价值&#xff1a;掌握 agents.md 的六大核心领域和最佳实践&#xff0c;让 AI 真正…

作者头像 李华
网站建设 2026/6/6 8:17:58

TurboDiffusion实战案例:游戏开发中场景动画快速原型设计

TurboDiffusion实战案例&#xff1a;游戏开发中场景动画快速原型设计 1. 游戏开发中的动画瓶颈与新解法 在现代游戏开发流程中&#xff0c;场景动画的制作一直是耗时最长、成本最高的环节之一。传统方式依赖美术团队逐帧绘制或使用复杂的3D引擎渲染&#xff0c;从概念到可交互…

作者头像 李华
网站建设 2026/5/28 20:49:33

Unsloth部署GPT-OSS:开源模型本地化实战教程

Unsloth部署GPT-OSS&#xff1a;开源模型本地化实战教程 你是否也曾在尝试微调大模型时被漫长的训练时间、高昂的显存消耗卡住&#xff1f;有没有想过&#xff0c;其实可以用更轻量、更高效的方式完成本地化部署和训练&#xff1f;今天我们要聊的 Unsloth&#xff0c;正是为解…

作者头像 李华
网站建设 2026/5/29 1:40:54

零售行业OCR应用案例:商品标签识别系统搭建全过程

零售行业OCR应用案例&#xff1a;商品标签识别系统搭建全过程 在零售行业&#xff0c;每天都有大量的商品需要录入系统、核对信息、更新库存。传统的人工录入方式不仅效率低&#xff0c;还容易出错。有没有一种方法&#xff0c;能快速准确地从商品标签上提取文字信息&#xff…

作者头像 李华
网站建设 2026/5/29 21:23:08

于51/STM32单片机锂电池电压电流电量太阳能充电保护云平台设计(设计源文件+万字报告+讲解)(支持资料、图片参考_相关定制)_文章底部可以扫码

基于51/STM32单片机锂电池电压电流电量太阳能充电保护云平台设计(设计源文件万字报告讲解)&#xff08;支持资料、图片参考_相关定制&#xff09;_文章底部可以扫码STM32-S328-锂电池电压电流电量功率欠压过载(过流)保护充电保护负载USB灯阈值OLED屏声光提醒(无线方式选择) 产品…

作者头像 李华