1. 项目背景与需求分析在能源化工行业的生产现场视频监控系统每天都会产生海量的视频数据。这些视频文件通常具有以下特点单文件体积大通常500MB-2GB需要长期保存至少3个月上传环境复杂厂区网络不稳定传统的HTTP上传方式经常遇到以下问题网络闪断导致整个文件上传失败大文件上传耗时过长服务器内存溢出风险2. 技术方案选型2.1 核心组件对比技术方案优点缺点原生HTML5无需插件兼容性差Flash上传兼容性好安全性低WebUploader支持分片/断点续传需要额外配置最终选择WebUploader的原因百度开源的成熟解决方案支持文件分片chunk内置MD5校验机制完善的API文档2.2 系统架构设计[浏览器端] WebUploader → [网络] → [服务端] Nginx → PHP → 存储集群关键参数配置分片大小2MB实测最优值并发数3厂区网络实测最佳超时时间300秒3. 前端实现细节3.1 WebUploader初始化var uploader WebUploader.create({ swf: Uploader.swf, server: /upload.php, pick: #filePicker, chunked: true, chunkSize: 2 * 1024 * 1024, threads: 3, formData: { uid: 设备ID } });3.2 关键事件处理// 分片上传前 uploader.on(uploadBeforeSend, function(block, data) { data.md5 uploader.md5File(block.file); }); // 上传进度 uploader.on(uploadProgress, function(file, percentage) { $(#progress).text(percentage * 100 %); });4. 服务端PHP实现4.1 接收分片数据$chunk isset($_REQUEST[chunk]) ? intval($_REQUEST[chunk]) : 0; $chunks isset($_REQUEST[chunks]) ? intval($_REQUEST[chunks]) : 0; $fileName isset($_REQUEST[name]) ? $_REQUEST[name] : ; // 临时分片文件路径 $tempDir uploads/tmp_ . $_POST[uid]; $filePath $tempDir . / . $fileName . .part . $chunk; if (!is_dir($tempDir)) { mkdir($tempDir, 0777, true); } move_uploaded_file($_FILES[file][tmp_name], $filePath);4.2 合并分片文件if ($chunk $chunks - 1) { $finalPath uploads/ . date(Ym) . / . $fileName; if (!is_dir(dirname($finalPath))) { mkdir(dirname($finalPath), 0777, true); } $out fopen($finalPath, wb); for ($i 0; $i $chunks; $i) { $partPath $tempDir . / . $fileName . .part . $i; $in fopen($partPath, rb); while ($buff fread($in, 4096)) { fwrite($out, $buff); } fclose($in); unlink($partPath); } fclose($out); rmdir($tempDir); }5. 生产环境优化方案5.1 内存管理在php.ini中调整upload_max_filesize 2G post_max_size 2G memory_limit 256M max_execution_time 36005.2 断点续传实现前端在上传前先请求/server/check接口服务端返回已上传的分片索引WebUploader自动跳过已传分片// check接口实现 $fileList glob($tempDir./*.part*); $uploadedChunks array_map(function($v){ return intval(substr($v, strrpos($v, part) 4)); }, $fileList); echo json_encode($uploadedChunks);6. 异常处理机制6.1 常见问题排查表现象可能原因解决方案分片上传失败临时目录权限不足chmod -R 777 uploads合并后文件损坏分片顺序错乱检查$chunk参数传递上传速度慢厂区网络限速调整chunkSize为5MB6.2 监控视频特殊处理添加水印信息exec(ffmpeg -i input.mp4 -vf drawtexttext设备1_.strftime(%Y%m%d):x10:y10 output.mp4);自动转码为H.264格式exec(ffmpeg -i input.mov -c:v libx264 -preset fast -crf 22 output.mp4);7. 性能测试数据在厂区典型网络环境下10Mbps带宽200ms延迟文件大小传统方式分片上传提升效果500MB15分钟8分钟46%1GB失败18分钟100%2GB失败35分钟100%8. 安全防护措施文件类型校验$allowed [video/mp4, video/avi]; if (!in_array($_FILES[file][type], $allowed)) { die(Invalid file type); }病毒扫描集成exec(clamscan --no-summary .escapeshellarg($tempPath), $output, $return); if ($return ! 0) { unlink($tempPath); die(Virus detected); }9. 实际部署建议存储方案选择热数据本地SSD存储最近7天温数据NAS存储7-30天冷数据对象存储30天以上负载均衡配置location /upload { proxy_pass http://upload_cluster; client_max_body_size 2G; proxy_read_timeout 3600s; }10. 扩展功能实现10.1 上传后自动生成缩略图$thumbCmd ffmpeg -i {$finalPath} -ss 00:00:05 -vframes 1 {$thumbPath}; exec($thumbCmd);10.2 与SCADA系统集成// 上传完成后触发SCADA事件 $scadaData [ device_id $_POST[uid], video_path $finalPath, timestamp time() ]; $context stream_context_create([ http [ method POST, header Content-Type: application/json, content json_encode($scadaData) ] ]); file_get_contents(http://scada/api/event, false, $context);
WebUploader分片上传在能源化工视频监控中的应用
1. 项目背景与需求分析在能源化工行业的生产现场视频监控系统每天都会产生海量的视频数据。这些视频文件通常具有以下特点单文件体积大通常500MB-2GB需要长期保存至少3个月上传环境复杂厂区网络不稳定传统的HTTP上传方式经常遇到以下问题网络闪断导致整个文件上传失败大文件上传耗时过长服务器内存溢出风险2. 技术方案选型2.1 核心组件对比技术方案优点缺点原生HTML5无需插件兼容性差Flash上传兼容性好安全性低WebUploader支持分片/断点续传需要额外配置最终选择WebUploader的原因百度开源的成熟解决方案支持文件分片chunk内置MD5校验机制完善的API文档2.2 系统架构设计[浏览器端] WebUploader → [网络] → [服务端] Nginx → PHP → 存储集群关键参数配置分片大小2MB实测最优值并发数3厂区网络实测最佳超时时间300秒3. 前端实现细节3.1 WebUploader初始化var uploader WebUploader.create({ swf: Uploader.swf, server: /upload.php, pick: #filePicker, chunked: true, chunkSize: 2 * 1024 * 1024, threads: 3, formData: { uid: 设备ID } });3.2 关键事件处理// 分片上传前 uploader.on(uploadBeforeSend, function(block, data) { data.md5 uploader.md5File(block.file); }); // 上传进度 uploader.on(uploadProgress, function(file, percentage) { $(#progress).text(percentage * 100 %); });4. 服务端PHP实现4.1 接收分片数据$chunk isset($_REQUEST[chunk]) ? intval($_REQUEST[chunk]) : 0; $chunks isset($_REQUEST[chunks]) ? intval($_REQUEST[chunks]) : 0; $fileName isset($_REQUEST[name]) ? $_REQUEST[name] : ; // 临时分片文件路径 $tempDir uploads/tmp_ . $_POST[uid]; $filePath $tempDir . / . $fileName . .part . $chunk; if (!is_dir($tempDir)) { mkdir($tempDir, 0777, true); } move_uploaded_file($_FILES[file][tmp_name], $filePath);4.2 合并分片文件if ($chunk $chunks - 1) { $finalPath uploads/ . date(Ym) . / . $fileName; if (!is_dir(dirname($finalPath))) { mkdir(dirname($finalPath), 0777, true); } $out fopen($finalPath, wb); for ($i 0; $i $chunks; $i) { $partPath $tempDir . / . $fileName . .part . $i; $in fopen($partPath, rb); while ($buff fread($in, 4096)) { fwrite($out, $buff); } fclose($in); unlink($partPath); } fclose($out); rmdir($tempDir); }5. 生产环境优化方案5.1 内存管理在php.ini中调整upload_max_filesize 2G post_max_size 2G memory_limit 256M max_execution_time 36005.2 断点续传实现前端在上传前先请求/server/check接口服务端返回已上传的分片索引WebUploader自动跳过已传分片// check接口实现 $fileList glob($tempDir./*.part*); $uploadedChunks array_map(function($v){ return intval(substr($v, strrpos($v, part) 4)); }, $fileList); echo json_encode($uploadedChunks);6. 异常处理机制6.1 常见问题排查表现象可能原因解决方案分片上传失败临时目录权限不足chmod -R 777 uploads合并后文件损坏分片顺序错乱检查$chunk参数传递上传速度慢厂区网络限速调整chunkSize为5MB6.2 监控视频特殊处理添加水印信息exec(ffmpeg -i input.mp4 -vf drawtexttext设备1_.strftime(%Y%m%d):x10:y10 output.mp4);自动转码为H.264格式exec(ffmpeg -i input.mov -c:v libx264 -preset fast -crf 22 output.mp4);7. 性能测试数据在厂区典型网络环境下10Mbps带宽200ms延迟文件大小传统方式分片上传提升效果500MB15分钟8分钟46%1GB失败18分钟100%2GB失败35分钟100%8. 安全防护措施文件类型校验$allowed [video/mp4, video/avi]; if (!in_array($_FILES[file][type], $allowed)) { die(Invalid file type); }病毒扫描集成exec(clamscan --no-summary .escapeshellarg($tempPath), $output, $return); if ($return ! 0) { unlink($tempPath); die(Virus detected); }9. 实际部署建议存储方案选择热数据本地SSD存储最近7天温数据NAS存储7-30天冷数据对象存储30天以上负载均衡配置location /upload { proxy_pass http://upload_cluster; client_max_body_size 2G; proxy_read_timeout 3600s; }10. 扩展功能实现10.1 上传后自动生成缩略图$thumbCmd ffmpeg -i {$finalPath} -ss 00:00:05 -vframes 1 {$thumbPath}; exec($thumbCmd);10.2 与SCADA系统集成// 上传完成后触发SCADA事件 $scadaData [ device_id $_POST[uid], video_path $finalPath, timestamp time() ]; $context stream_context_create([ http [ method POST, header Content-Type: application/json, content json_encode($scadaData) ] ]); file_get_contents(http://scada/api/event, false, $context);
