企业官网建设流程全解析

大文件上传功能开发纪实：我与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"]);}

测试血泪史

1. IE11兼容性测试：发现进度条在IE下变成"量子进度条"（既0%又100%）
2. 断点续传测试：故意断网续传，结果PHP报错"文件已存在"（客户：这功能是坏的！）
3. 大文件压力测试：上传2G文件时，服务器报警"磁盘空间不足"（客户：再买块硬盘？从你尾款里扣！）

服务承诺（老板的刀架在脖子上）

• 免费源代码：GitHub已开源（求各位大爷点个Star）
• 7*24技术支持：凌晨3点接到客户电话说"进度条不动"（老板：你睡什么睡！）
• 终身免费升级：客户每周提新需求（老板：这个功能加进去！那个也加上！）

加入技术交流群

欢迎各位同行加入QQ群374992201，在这里你可以：

• 吐槽奇葩客户需求（比如"要能上传但不要显示进度条"）
• 交流PHP黑魔法（如何用正则表达式解析Word文档）
• 围观我的秃头过程（每天掉发量与代码行数成正比）

最后温馨提示：接外包需谨慎，遇到说"简单改改就行"的客户，请立即准备好降压药和速效救心丸！💊

安装环境

PHP:7.2.14

调整块大小

NOSQL

NOSQL不需要任何配置，可以直接访问测试

SQL

创建数据库

您可以直接复制脚本进行创建

配置数据库连接

安装依赖

访问页面进行测试

数据表中的数据

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

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

文件夹下载

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

免费下载示例

点击下载完整示例