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

PHP中如何实现500M视频大文件的分片上传方案？

news 2026/5/12 14:58:14

开发者日记：大文件管理系统毕业设计攻坚实录
日期：2023年11月25日
天气：阴有小雨

作为一名江苏高校的计算机专业大三学生，我的毕业设计选题是全浏览器兼容的大文件管理系统，需支持20GB文件传输、文件夹层级结构保留，并覆盖IE8及国产信创浏览器（龙芯/红莲花/奇安信）。经过三周技术攻关，现将关键实现方案与代码片段整理如下，供同领域同学参考。

一、技术架构设计

1. 跨浏览器兼容方案

浏览器类型	前端方案	后端适配
IE8	WebUploader Flash引擎	禁用HTML5拖拽，改用表单提交
Chrome/Firefox	HTML5 File API + WebUploader混合模式	支持分片并发上传
信创浏览器	动态检测降级为单文件上传	关闭WebSocket长连接

2. 系统架构图

客户端（Vue3） → 分片上传 → PHP处理 → 阿里云OSS存储 ↓ MySQL记录元数据（文件哈希/分片状态/用户权限）

二、核心代码实现

1. 前端兼容性组件（Vue3）

// src/components/SmartUploader.vueimport{onMounted,ref}from'vue';importWebUploaderfrom'webuploader';import{detectBrowser}from'@/utils/browserDetect';exportdefault{setup(){constprogress=ref(0);constbrowserInfo=detectBrowser();onMounted(()=>{constconfig={swf:browserInfo.isIE8?'/static/Uploader.swf':null,// IE8必需Flashserver:'/api/upload',pick:'#filePicker',accept:{title:'All Files',extensions:'*',mimeTypes:'*'},chunked:true,chunkSize:5*1024*1024,// 5MB分片threads:browserInfo.isLoongBrowser?1:3,// 龙芯浏览器单线程formData:{browserType:browserInfo.type,timestamp:Date.now()}};// 国产浏览器特殊处理if(browserInfo.isRedLotus){config.dnd=false;// 禁用拖拽上传config.disableGlobalDnd=true;}constuploader=WebUploader.create(config);// 文件夹上传处理（非IE8）if(!browserInfo.isIE8&&WebUploader.Browser.HTML5){uploader.on('filesQueued',(files)=>{files.forEach(file=>{if(file.relativePath){// HTML5文件夹结构traverseFolder(file,uploader);}else{uploader.upload(file);}});});}// 进度监控uploader.on('uploadProgress',(file,percentage)=>{progress.value=Math.round(percentage*100);});});// 递归解析文件夹（HTML5 API）consttraverseFolder=(entry,uploader)=>{constdirReader=entry.createReader();dirReader.readEntries(entries=>{entries.forEach(subEntry=>{if(subEntry.isFile){subEntry.file(file=>{file.relativePath=`${entry.relativePath}/${file.name}`;uploader.addFiles(file);});}else{subEntry.relativePath=`${entry.relativePath}/${subEntry.name}`;traverseFolder(subEntry,uploader);}});});};return{progress};}};

2. 后端分片处理（PHP）

// api/upload_handler.php['accessKeyId'=>'your-aliyun-key','accessKeySecret'=>'your-aliyun-secret','endpoint'=>'oss-cn-shanghai.aliyuncs.com','bucket'=>'your-bucket'],'mysql'=>['host'=>'localhost','dbname'=>'file_manager','user'=>'root','pass'=>'password']];// 处理分片上传try{$pdo=newPDO("mysql:host={$config['mysql']['host']};dbname={$config['mysql']['dbname']}",$config['mysql']['user'],$config['mysql']['pass']);$chunkIndex=$_POST['chunk']??0;$totalChunks=$_POST['chunks']??1;$fileMd5=$_POST['md5']??md5_file($_FILES['file']['tmp_name']);// 兼容IE8$relativePath=$_POST['relativePath']??'';$userId=$_SESSION['user_id']??0;// 存储临时分片$chunkDir="/tmp/chunks/{$fileMd5}";if(!is_dir($chunkDir))mkdir($chunkDir,0777,true);move_uploaded_file($_FILES['file']['tmp_name'],"{$chunkDir}/{$chunkIndex}");// 记录分片状态$stmt=$pdo->prepare("REPLACE INTO file_chunks (md5, chunk_index, total_chunks, user_id, created_at) VALUES (?, ?, ?, ?, NOW())");$stmt->execute([$fileMd5,$chunkIndex,$totalChunks,$userId]);// 合并分片（最后一个分片）if($chunkIndex==$totalChunks-1){$ossPath="uploads/{$userId}/".ltrim($relativePath,'/');mergeChunks($fileMd5,$totalChunks,$ossPath,$config);// 记录完整文件信息$fileStmt=$pdo->prepare("INSERT INTO files (name, path, md5, size, user_id, created_at) VALUES (?, ?, ?, ?, ?, NOW())");$fileStmt->execute([basename($relativePath),$ossPath,$fileMd5,$_POST['size']??filesize($_FILES['file']['tmp_name']),$userId]);echojson_encode(['status'=>'completed','path'=>$ossPath]);}else{echojson_encode(['status'=>'pending']);}}catch(Exception$e){http_response_code(500);echojson_encode(['error'=>$e->getMessage()]);}// 分片合并函数functionmergeChunks($md5,$chunks,$ossPath,$config){$tempFile="/tmp/{$md5}_merged";$ossClient=newOssClient($config['oss']['accessKeyId'],$config['oss']['accessKeySecret'],$config['oss']['endpoint']);// 合并本地文件for($i=0;$i<$chunks;$i++){file_put_contents($tempFile,file_get_contents("/tmp/chunks/{$md5}/{$i}"),FILE_APPEND);}// 上传至OSS$ossClient->uploadFile($config['oss']['bucket'],$ossPath,$tempFile);// 清理临时文件unlink($tempFile);for($i=0;$i<$chunks;$i++){unlink("/tmp/chunks/{$md5}/{$i}");}rmdir("/tmp/chunks/{$md5}");}

3. 数据库表设计

-- 文件分片状态表CREATETABLE`file_chunks`(`id`BIGINTAUTO_INCREMENTPRIMARYKEY,`md5`VARCHAR(32)NOTNULLCOMMENT'文件唯一标识',`chunk_index`INTNOTNULLCOMMENT'分片序号',`total_chunks`INTNOTNULLCOMMENT'总分片数',`user_id`INTNOTNULLCOMMENT'关联用户',`created_at`DATETIMENOTNULLCOMMENT'记录时间',UNIQUEKEY`md5_chunk`(`md5`,`chunk_index`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;-- 文件元数据表CREATETABLE`files`(`id`BIGINTAUTO_INCREMENTPRIMARYKEY,`name`VARCHAR(512)NOTNULLCOMMENT'文件名（含扩展名）',`path`VARCHAR(1024)NOTNULLCOMMENT'OSS存储路径',`md5`VARCHAR(32)NOTNULLCOMMENT'文件哈希值',`size`BIGINTNOTNULLCOMMENT'文件大小（字节）',`user_id`INTNOTNULLCOMMENT'上传用户ID',`created_at`DATETIMENOTNULLCOMMENT'上传时间',INDEX`idx_user_md5`(`user_id`,`md5`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;

三、关键问题解决方案

IE8文件夹上传

方案：通过``的降级处理

代码：

// 兼容IE8的文件夹选择if(browserInfo.isIE8){document.getElementById('legacyFolderInput').onclick=()=>{document.getElementById('legacyInput').click();};document.getElementById('legacyInput').onchange=(e)=>{constfiles=e.target.files;// 模拟文件夹结构（需后端配合解析路径）};}

龙芯浏览器性能优化
- 发现：龙芯CPU在多线程分片时CPU占用率达100%
- 解决：强制单线程上传（threads: 1）
20GB文件内存控制
- 前端：使用FileReader.readAsArrayBuffer分块读取
- 后端：PHP配置memory_limit = -1（由分片逻辑接管内存）

四、毕业设计创新点

智能降级机制

通过User-Agent自动切换上传策略

// 浏览器检测示例exportfunctiondetectBrowser(){constua=navigator.userAgent;return{isIE8:ua.includes('MSIE 8.0'),isLoongBrowser:ua.includes('LoongBrowser'),isRedLotus:ua.includes('RedLotus'),type:ua.includes('Edge')?'edge':ua.includes('Firefox')?'firefox':'unknown'};}