多平台环境下大文件上传的通用解决方案总结？

2023年XX月XX日 🌟 | 一个菜鸟程序员的“秃头”日记

💻 今日份的崩溃与突破

早上8点：对着镜子默念三遍——“我能搞定10G文件上传！”（然后发现IE8连console.log都报错…）

上午10点：试图用WebUploader征服IE8，结果它用古老的ActiveX对我发起灵魂拷问。💔 于是怒写300行polyfill，现在我的代码像极了缝合怪。

下午3点：测试文件夹上传时，惊喜地发现龙芯浏览器把``读成了“未定义外星语”… 果断祭出递归遍历File API的祖传秘方！

🚀 技术宅的快乐（代码片段）

前端：Vue3里混搭原生JS的骚操作

// 文件切片加密（附赠中二注释版）functionsliceAndEncrypt(file,key='我爱山东大馒头'){constchunkSize=5*1024*1024;// 5MB一片，吃多了怕噎着letchunks=[];for(leti=0;i<file.size;i+=chunkSize){constchunk=file.slice(i,i+chunkSize);constencryptedChunk=XOREncrypt(chunk,key);// 自制加密（别问，问就是Base64改）chunks.push({index:i,hash:md5(`chunk_${i}_${file.name}_${Date.now()}`),// 给切片起个霸气的名字data:encryptedChunk});}returnchunks;}// IE8专属感动代码if(navigator.userAgent.indexOf('MSIE 8')>-1){document.write('<\/script>');console.log("尊敬的IE8用户，您正在体验考古级编程...");}

后端PHP：接收切片时顺便讲个段子

<?php// 文件合并接口（带防呆设计）functionmergeFiles($fileName,$totalChunks){$outputPath="/uploads/merge_".$fileName;for($i=0;$i<$totalChunks;$i++){$chunkPath="/uploads/chunk_".$i."_".$fileName;if(!file_exists($chunkPath)){die(json_encode(["error"=>"第{$i}片丢了！是不是被猫吃了？"]));}file_put_contents($outputPath,file_get_contents($chunkPath),FILE_APPEND);}return["success"=>true,"path"=>$outputPath];}?>

📢 求援与求职的呐喊

1. 技术求救：哪位大佬能救救我的国产浏览器适配？QQ群374992201，请备注“文件上传拯救者”！
2. 求职广告：本人擅长：
   • 用console.log调试IE8（被迫技能）
   • 在Vue里写jQuery风格代码（老板说这叫全栈）
   • 用表情包注释代码（提高团队士气）
     求山东或远程开发岗！

🌝 明日计划

• 让断点续传支持“半夜断电续传”功能（localStorage + IndexDB双备份）
• 给加密算法起个霸气的名字（比如“山东大葱加密法”）
• 祈祷答辩时老师的电脑别装IE8

PS：欢迎推荐工作，薪资要求——够买防脱发洗发水就行！ 😭

（代码仅供娱乐，实际开发记得删掉中二注释哦～）

设置框架

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

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

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

文件夹下载

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

下载完整示例

下载完整示例