PHP如何优化视频大文件的断点续传切片处理分享？
【一个大三生的悲喜大文件上传血泪史】敲黑板各位看官且听我道来这毕业设计简直比追女神还难导师说要搞个能上传10G文件的系统还要支持IE8这种上古神器更要命的是必须用原生JS实现Vue3那是啥能吃吗。前端篇与WebUploader的相爱相杀// 经过三天三夜与IE8的搏斗终于搞出这个兼容性拉满的uploader.jsfunctionCompatibleUploader(){this.chunks[];this.chunkSize5*1024*1024;// 5MB分片this.fileMd5;// 检测浏览器类型IE8特供版this.isIE8function(){return!!window.ActiveXObject!document.addEventListener;};// 计算文件MD5IE8哭晕在厕所this.calculateMD5function(file,callback){if(this.isIE8()){// IE8的降级方案用文件名大小当伪MD5callback(file.name_file.size);return;}// 现代浏览器用crypto APIconstreadernewFileReader();reader.onload(e){constarrnewUint8Array(e.target.result);lethash0;for(leti0;iarr.length;i){hash((hash5)-hash)arr[i];hash|0;}callback(ie8_Math.abs(hash).toString(16));};reader.readAsArrayBuffer(file.slice(0,1024*1024));// 只读前1MB};// 分片上传IE8兼容版this.uploadChunkfunction(file,chunkIndex,totalChunks){conststartchunkIndex*this.chunkSize;constendMath.min(file.size,startthis.chunkSize);constblobfile.slice(start,end);constformDatanewFormData();formData.append(file,blob);formData.append(chunkIndex,chunkIndex);formData.append(totalChunks,totalChunks);formData.append(md5,this.fileMd5);constxhrnewXMLHttpRequest();xhr.open(POST,/api/upload,true);xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200){// 保存进度到localStorageIE8用userData替代constprogressKeyupload_progress_this.fileMd5;constprogressData{chunkIndex:chunkIndex,totalChunks:totalChunks};if(this.isIE8()){// IE8的降级存储方案实际项目请用cookie或flashdocument.cookieprogressKeyencodeURIComponent(JSON.stringify(progressData)); expiresFri, 31 Dec 9999 23:59:59 GMT;}else{localStorage.setItem(progressKey,JSON.stringify(progressData));}}}}.bind(this);xhr.send(formData);};}后端篇PHP与OSS的虐恋// upload.php - 这个文件让我掉了好多头发header(Content-Type: application/json);// 配置信息实际项目请用.env$ossConfig[accessKeyIdyour_access_key,accessKeySecretyour_secret_key,endpointoss-cn-hangzhou.aliyuncs.com,bucketyour-bucket];// 初始化OSS客户端简化版functioninitOssClient($config){// 实际项目请用官方SDK// 这里用伪代码表示IE8兼容的PHP5.2写法return(object)[putObjectfunction($bucket,$object,$file)use($config){// 模拟OSS上传实际要调用阿里云SDKfile_put_contents(/tmp/oss_simulator/$object,file_get_contents($file));returntrue;}];}// 处理分片上传$chunkIndex$_POST[chunkIndex]??0;$totalChunks$_POST[totalChunks]??1;$md5$_POST[md5]??;$tempDir/tmp/uploads/$md5;// 创建临时目录if(!file_exists($tempDir)){mkdir($tempDir,0777,true);}// 保存分片$chunkPath$tempDir/chunk_$chunkIndex;move_uploaded_file($_FILES[file][tmp_name],$chunkPath);// 如果是最后一个分片合并文件if($chunkIndex$totalChunks-1){$finalPath$tempDir/final_file;$ossObjectuploads/.uniqid()._.basename($_FILES[file][name]);// 合并分片IE8兼容的合并方式$fpfopen($finalPath,wb);for($i0;$i$totalChunks;$i){$chunkContentfile_get_contents($tempDir/chunk_$i);fwrite($fp,$chunkContent);}fclose($fp);// 上传到OSS$ossClientinitOssClient($ossConfig);if($ossClient-putObject($ossConfig[bucket],$ossObject,$finalPath)){// 清理临时文件array_map(unlink,glob($tempDir/*));rmdir($tempDir);echojson_encode([successtrue,ossUrl$ossObject]);}else{echojson_encode([successfalse,errorOSS上传失败]);}exit;}echojson_encode([successtrue]);血泪经验总结IE8兼容性用ActiveXObject替代现代API降级方案文件名大小当伪MD5存储用cookie替代localStorage断点续传前端用localStorage/cookie保存进度后端用临时目录存储已上传分片合并时检查分片完整性文件夹上传前端递归读取文件夹内容后端维护目录结构映射表用JSON保存层级关系示例{name:root,type:dir,children:[{name:subfolder,type:dir,children:[...]},{name:file.txt,type:file,md5:abc123}]}加密传输前端用CryptoJS加密IE8用自定义算法后端解密后处理示例加密函数// IE8兼容的简单加密functionsimpleEncrypt(str){if(isIE8()){returnstr.split().reverse().join();// 反序当加密}// 现代浏览器用CryptoJSreturnCryptoJS.AES.encrypt(str,secret_key).toString();}求职彩蛋正在疯狂投递简历中求各位大佬内推擅长挖漏洞自己系统的那种写兼容IE8的代码头发还在和产品经理打架物理QQ群374992201进群抢红包推荐项目拿提成说不定还能找到工作PS导师说这个系统要是能跑起来直接给优秀毕业设计兄弟们靠你们了安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。免费下载示例点击下载完整示例
)
