使用PHP进行跨平台视频大文件分片上传分享？
开发者日记 - 大文件传输系统开发实录日期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.vueimportWebUploaderfromwebuploader;importwebuploader/dist/webuploader.css;exportdefault{mounted(){constuploaderWebUploader.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){constfilese.target.files;if(files.lengthfiles[0].webkitRelativePath){// 递归解析文件夹constparseDir(file,path){constfullPathpathfile.name;if(file.isDirectory){// 模拟文件夹上传实际需后端支持return;}uploader.addFiles({name:file.name,relativePath:fullPath,size:file.size,type:file.type});};Array.from(files).forEach(fileparseDir(file));}});// 断点续传从localStorage加载进度constresumeDatalocalStorage.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$obsClientnew\OBS\ObsClient([keyyour-access-key,secretyour-secret-key,endpointobs.cn-east-3.myhuaweicloud.com]);$obsPathuploads/{$fileMd5}/chunk_{$chunkIndex};$obsClient-putObject([Bucketyour-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([needMergetrue,fileMd5$fileMd5]);}else{echojson_encode([successtrue]);}?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中测试webkitRelativePathIE使用ActiveX模拟需用户授权。性能优化分片并发上传WebUploader默认支持3个并发。华为云OBS启用CDN加速下载。断点续传验证手动终止进程后重启上传时跳过已完成的分片。后续计划完善QQ群技术支持文档提供常见问题解答FAQ。开源代码至GitHub附详细部署说明。考虑增加WebSocket实时进度通知功能。今日总结核心功能已跑通但IE兼容性和文件夹解析仍需打磨。欢迎大神加入QQ群交流优化方案日记结束注实际项目中需补充安全校验如文件类型白名单、分片签名防篡改代码仅为示例框架需根据业务需求调整。安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。免费下载示例点击下载完整示例
)
