大文件上传功能开发纪实：我与2G文件的恩怨情仇
客户需求分析
昨天接了个"看似简单实则要命"的外包项目，客户甩来的需求清单让我差点把咖啡喷到屏幕上：
- 支持2G文件批量上传😱
- 兼容IE11到Chrome最新版🤯
- 要能断点续传🔥
- 还要显示上传进度条📊
- 最后必须开源+终身免费维护💰（老板您这是要把我逼成慈善家啊！）
技术选型大戏
前端阵容
- Vue2.6.14：老当益壮的框架（客户：不许用Vue3！我们程序员平均年龄45岁！）
- Axios：HTTP请求库（实际是老板听说"业界标准"硬塞的）
- SparkMD5：文件哈希计算（用来判断是否重复上传，毕竟2G文件传两遍会死人）
后端天团
- PHP 7.4：配合客户服务器环境（客户：PHP8？没听过！我们用的CentOS 6！）
- Workerman：长连接处理（老板：什么？你还要我装Swoole？）
- 七牛云SDK：文件存储（客户：能用免费的吗？我们预算只够买咖啡）
开发过程实录
前端分片上传组件（Vue版）
export default { data() { return { progress: 0, chunks: [], isPaused: false } }, methods: { handleFile(e) { const file = e.target.files[0] this.splitFile(file) }, splitFile(file) { const chunkSize = 5 * 1024 * 1024 // 5MB分片 const totalChunks = Math.ceil(file.size / chunkSize) for(let i=0; i<totalChunks; i++) { this.chunks.push({ index: i, loaded: 0, blob: file.slice(i*chunkSize, (i+1)*chunkSize) }) } this.uploadChunks() }, async uploadChunks() { for(let chunk of this.chunks) { if(this.isPaused) break const formData = new FormData() formData.append('chunk', chunk.blob) formData.append('index', chunk.index) formData.append('total', this.chunks.length) formData.append('md5', await this.calculateMD5(chunk.blob)) await axios.post('/upload', formData, { onUploadProgress: (e) => { chunk.loaded = e.loaded this.progress = (this.chunks.reduce((sum,c)=>sum+c.loaded,0)/file.size)*100 } }) } if(!this.isPaused) this.mergeChunks() }, pauseUpload() { this.isPaused = !this.isPaused alert(this.isPaused ? '已暂停（老板您终于点对了！）' : '继续上传（求您别点了！）') } } }PHP后端处理（生死时速版）
query("INSERT INTO progress (md5, index, total) VALUES ('$md5',$index,$total)");// 合并分片（终极生死时刻）if($index==$total-1){$file=fopen("uploads/$md5",'w');for($i=0;$i<$total;$i++){fwrite($file,file_get_contents("temp/$md5-$i"));}fclose($file);// 通知前端完成（客户：能发个邮件吗？我们不看控制台）echojson_encode(['status'=>'success','url'=>"uploads/$md5"]);}测试血泪史
- IE11兼容性测试：发现进度条在IE下变成"量子进度条"（既0%又100%）
- 断点续传测试：故意断网续传，结果PHP报错"文件已存在"（客户：这功能是坏的！）
- 大文件压力测试：上传2G文件时，服务器报警"磁盘空间不足"（客户：再买块硬盘？从你尾款里扣！）
服务承诺（老板的刀架在脖子上）
- 免费源代码：GitHub已开源（求各位大爷点个Star）
- 7*24技术支持：凌晨3点接到客户电话说"进度条不动"（老板：你睡什么睡！）
- 终身免费升级：客户每周提新需求（老板：这个功能加进去！那个也加上！）
加入技术交流群
欢迎各位同行加入QQ群374992201，在这里你可以：
- 吐槽奇葩客户需求（比如"要能上传但不要显示进度条"）
- 交流PHP黑魔法（如何用正则表达式解析Word文档）
- 围观我的秃头过程（每天掉发量与代码行数成正比）
最后温馨提示：接外包需谨慎，遇到说"简单改改就行"的客户，请立即准备好降压药和速效救心丸！💊
安装环境
PHP:7.2.14
调整块大小
NOSQL
NOSQL不需要任何配置，可以直接访问测试
SQL
创建数据库
您可以直接复制脚本进行创建
配置数据库连接
安装依赖
访问页面进行测试
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
批量下载
支持文件批量下载
下载续传
文件下载支持离线保存进度信息，刷新页面，关闭页面，重启系统均不会丢失进度信息。
文件夹下载
支持下载文件夹，并保留层级结构，不打包，不占用服务器资源。
免费下载示例
点击下载完整示例
