当前位置：首页 > news >正文

国产化环境中PHP如何上传500M以上的超大附件？

news 2026/5/11 13:54:54

开发者日记 - 大文件传输系统开发实录
日期：2023年11月15日
天气：阴

项目背景与需求梳理

作为江苏的一名独立开发者，近期承接了一个企业级文件传输系统项目，核心需求如下：

大文件支持：单文件20GB，需兼容文件夹上传（保留层级结构）。
断点续传：跨会话、跨设备（重启电脑后仍可恢复）。
全平台兼容：Windows/macOS/Linux，浏览器覆盖IE8到Chrome/Firefox/Safari等。
技术栈：
- 前端：Vue3 + WebUploader（或H5 API）
- 后端：PHP + MySQL（记录分片信息）
- 存储：华为云OBS（对象存储）
特殊要求：免费开源代码、7×24小时技术支持（通过QQ群374992201）。

技术选型与挑战

1. 上传组件选择

WebUploader：兼容IE8+，支持分片、断点续传，但需手动封装文件夹解析逻辑。
H5 File API：现代浏览器支持良好，但IE8/9需Polyfill，且文件夹上传需依赖webkitdirectory（非标准）。
决策：以WebUploader为主，H5作为降级方案，通过User-Agent判断浏览器类型动态切换。

2. 断点续传设计

分片存储：将大文件切分为5MB分片，上传时记录已完成的分片序号。
进度持久化：
- 前端：使用localStorage或IndexedDB存储临时进度（跨会话）。
- 后端：MySQL表记录文件唯一标识（MD5）、总分片数、已上传分片列表。
跨设备恢复：通过文件MD5校验匹配历史记录，从华为云OBS合并已上传分片。

3. 文件夹上传实现

WebUploader扩展：监听directory事件，递归解析文件夹结构，生成扁平化的文件路径列表（如/parent/child/file.txt）。
后端处理：接收路径信息，在华为云OBS中按原路径创建空文件夹（通过putObject设置Content-Type: application/directory）。

核心代码实现

前端（Vue3 + WebUploader）

// src/components/Uploader.vueimportWebUploaderfrom'webuploader';import'webuploader/dist/webuploader.css';exportdefault{mounted(){constuploader=WebUploader.create({swf:'/path/to/webuploader.swf',// IE8/9兼容server:'/api/upload',chunked:true,chunkSize:5*1024*1024,// 5MB分片formData:{fileMd5:'',// 通过后端接口预先计算isDir:false// 标记是否为文件夹},files:[]// 存储文件夹结构});// 监听文件夹选择（仅现代浏览器）document.getElementById('filePicker').addEventListener('change',(e)=>{constfiles=e.target.files;if(files.length&&files[0].webkitRelativePath){// 递归解析文件夹constparseDir=(file,path='')=>{constfullPath=path+file.name;if(file.isDirectory){// 模拟文件夹上传（实际需后端支持）return;}uploader.addFiles({name:file.name,relativePath:fullPath,size:file.size,type:file.type});};Array.from(files).forEach(file=>parseDir(file));}});// 断点续传：从localStorage加载进度constresumeData=localStorage.getItem('upload_progress');if(resumeData){const{fileMd5,chunks}=JSON.parse(resumeData);uploader.option('formData',{fileMd5,isDir:false});// 跳过已上传的分片（需后端配合校验）}// 上传完成合并分片uploader.on('uploadSuccess',(file,response)=>{if(response.needMerge){fetch('/api/merge',{method:'POST',body:JSON.stringify({fileMd5:response.fileMd5})});}});}};

后端（PHP + MySQL）

// api/upload.phpprepare("INSERT INTO upload_chunks (file_md5, chunk_index, uploaded_at) VALUES (?, ?, NOW()) ON DUPLICATE KEY UPDATE updated_at = NOW()");$stmt->execute([$fileMd5,$chunkIndex]);// 上传分片到华为云OBS$obsClient=new\OBS\ObsClient(['key'=>'your-access-key','secret'=>'your-secret-key','endpoint'=>'obs.cn-east-3.myhuaweicloud.com']);$obsPath="uploads/{$fileMd5}/chunk_{$chunkIndex}";$obsClient->putObject(['Bucket'=>'your-bucket','Key'=>$obsPath,'SourceFile'=>$_FILES['file']['tmp_name']]);// 检查是否所有分片已上传$chunksCount=$pdo->query("SELECT COUNT(*) FROM upload_chunks WHERE file_md5 = '{$fileMd5}'")->fetchColumn();$totalChunks=$_POST['totalChunks'];// 前端传递总分片数if($chunksCount===$totalChunks){echojson_encode(['needMerge'=>true,'fileMd5'=>$fileMd5]);}else{echojson_encode(['success'=>true]);}?>

MySQL表结构

CREATETABLEupload_chunks(idINTAUTO_INCREMENTPRIMARYKEY,file_md5VARCHAR(32)NOTNULL,chunk_indexINTNOTNULL,uploaded_atDATETIMEDEFAULTCURRENT_TIMESTAMP,UNIQUEKEY(file_md5,chunk_index));

测试与优化

兼容性测试：
- IE8：需引入es5-shim和json2.js。
- 文件夹上传：在Chrome中测试webkitRelativePath，IE使用ActiveX模拟（需用户授权）。
性能优化：
- 分片并发上传（WebUploader默认支持3个并发）。
- 华为云OBS启用CDN加速下载。
断点续传验证：
- 手动终止进程后，重启上传时跳过已完成的分片。