100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > thinkphp6+webuploader实现大文件分片上传/本地保存或上传OSS

thinkphp6+webuploader实现大文件分片上传/本地保存或上传OSS

时间:2020-09-21 14:34:34

相关推荐

thinkphp6+webuploader实现大文件分片上传/本地保存或上传OSS

thinkPHP6+webuploader分片上传大视频的解决方案:

①能解决视频太大,1G、2G直传服务器压力过大

②部分追求完美的人不发接受直传,那只能分片上传

③分片上传是我找到的比较合理的解决方案

④我感觉这个方案只是能用,肯定还有优化的空间,如有大佬看到欢迎指点

⑤综合各路大佬的代码进行修改

可以接受不分片上传的直接不要往下看,直接去这里设置:

Nginx上传大文件响应超时设置,TP6响应超时设置

前端代码

<link rel="stylesheet" type="text/css" href="xxx/webuploader.css"><style>.webuploader-container {display: inline-block;float: left;margin-right: 10px;position: relative;}.webuploader-element-invisible {position: absolute !important;clip: rect(1px 1px 1px 1px);/* IE6, IE7 */clip: rect(1px, 1px, 1px, 1px);}.webuploader-pick {position: relative;display: inline-block;cursor: pointer;background: #00b7ee;padding: 10px 15px;color: #fff;text-align: center;border-radius: 3px;overflow: hidden;}.webuploader-pick-hover {background: #00a2d4;}.webuploader-pick-disable {opacity: 0.6;pointer-events: none;}.progress {height: 40px;/* background: #ff4040; */margin-bottom: 20rpx;}.progress-bar {height: 10px;background: #009220;color: #ffffff;}</style><!--引入JS--><script type="text/javascript" src="xxx/jquery.min.js"></script><script type="text/javascript" src="xxx/webuploader.js"></script><!--html代码--><div class="layui-form-item"><label class="layui-form-label"><span class="x-red">*</span>视频</label><div id="uploadfile" class="layui-input-inline"><div id="the_2655" class="uploader-list"></div><div id="pick_2655">选择文件</div><input type="hidden" name="vediosrc" id="vediosrc"><a id="Btn_2655" class="layui-btn layui-btn-primary">开始上传</a></div></div><!--JS代码--><script>uploadfiles(2655, "files");function uploadfiles(ids, folder) {$(function () {var $list = $("#the_" + ids);$btn = $("#Btn_" + ids);var uploader = WebUploader.create({resize: false, // 不压缩imageswf: '__STATIC__/admin/webuploader-0.1.5/uploader.swf', // swf文件路径server: '{:url("admin/videomanage/uploadFile")}', // 文件接收服务端。pick: "#pick_" + ids, // 选择文件的按钮。可选chunked: true, //是否要分片处理大文件上传chunkSize: 5 * 1024 * 1024, //分片上传,每片2M,默认是5M//fileSizeLimit: 6*1024* 1024 * 1024, // 所有文件总大小限制 6GfileSingleSizeLimit: 10 * 1024 * 1024 * 1024, // 单个文件大小限制 5 GformData: {folder: folder //自定义参数}//auto: false //选择文件后是否自动上传// chunkRetry : 2, //如果某个分片由于网络问题出错,允许自动重传次数//runtimeOrder: 'html5,flash',// accept: {// title: 'Images',// extensions: 'gif,jpg,jpeg,bmp,png',// mimeTypes: 'image/*'// }});// 当有文件被添加进队列的时候uploader.on('fileQueued', function (file) {// console.log(file);$list.append('<div id="' + file.id + '" class="item">' +'<h4 class="info">' + file.name + '</h4>' +'<p class="state">等待上传...</p>' +'</div>');});// 文件上传过程中创建进度条实时显示。uploader.on('uploadProgress', function (file, percentage) {var $li = $('#' + file.id),$percent = $li.find('.progress .progress-bar');// 避免重复创建if (!$percent.length) {//视频加载中...实际上是正在分片上传到后台进行保存$percent = $('<div class="progress progress-striped active">视频加载中</i>' +'<div class="progress-bar" role="progressbar" style="width: 0%">' +'</div>' +'</div>').appendTo($li).find('.progress-bar');}$li.find('p.state').text('上传中');$percent.css('width', percentage * 100 + '%');});// 文件上传成功uploader.on('uploadSuccess', function (file, response) {$('#' + file.id).find('p.state').text('视频加载完成');$list.append('<input type="hidden" name="video" value="' + response.filePath + '" />');// console.log(response.filePath);let loading = layer.msg('视频上传中',{time: 0 //不自动关闭});//七牛云OSS只需要文件的绝对路径即可上传,所以存储到服务器后我就直接请求上传七牛云了//"{:url('admin/videomanage/upload')}"这个路径直接改成后台地址vae.ajax({url: "{:url('admin/videomanage/upload')}",data: {filePath: response.filePath,fileName: response.oldName},type: 'post',async: true,success: function (res) {// console.log(res);layer.close(loading);if (res.code == 200) {data = res.data;$('#vediosrc').val(data.result)$('#demo2 input').attr('value', data.imgName);$('#demo2 img').attr('src', data.imgName);} else {layer.msg(res.msg);return false;}},error: function (err) {}})});// 文件上传失败,显示上传出错uploader.on('uploadError', function (file) {$('#' + file.id).find('p.state').text('上传出错');});// 完成上传完uploader.on('uploadComplete', function (file) {$('#' + file.id).find('.progress').fadeOut();});$btn.on('click', function () {if ($(this).hasClass('disabled')) {return false;}uploader.upload();// if (state === 'ready') {//uploader.upload();// } else if (state === 'paused') {//uploader.upload();// } else if (state === 'uploading') {//uploader.stop();// }});});}</script>

后端代码

public function uploadFile(){header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");header("Content-type: text/html; charset=gbk32");header("Cache-Control: no-store, no-cache, must-revalidate");header("Cache-Control: post-check=0, pre-check=0", false);header("Pragma: no-cache");//这是TP6获取文件的方式,不对的话要修改,不然下面的$out就会报错$folder = request()->file("file");;if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {exit; // finish preflight CORS requests here}if ( !empty($_REQUEST[ 'debug' ]) ) {$random = rand(0, intval($_REQUEST[ 'debug' ]) );if ( $random === 0 ) {header("HTTP/1.0 500 Internal Server Error");exit;}}// header("HTTP/1.0 500 Internal Server Error");// exit;// 5 minutes execution timeset_time_limit(5 * 60);// Uncomment this one to fake upload timeusleep(5000);// Settings//获取根目录的方法最好是打印出来看是否正确,不然下面创建文件就会报错,确保路径正确$targetDir = app()->getRootPath() . 'public/storage/video' .DIRECTORY_SEPARATOR.'file_material_tmp'; //存放分片临时目录if($folder){$uploadDir = app()->getRootPath() . 'public/storage/video' .'file_material'.DIRECTORY_SEPARATOR.date('Ymd');}else{$uploadDir = app()->getRootPath() . 'public/storage/video' .'file_material'.DIRECTORY_SEPARATOR.date('Ymd'); //分片合并存放目录}$cleanupTargetDir = true; // Remove old files$maxFileAge = 5 * 3600; // Temp file age in seconds// echo $uploadDir;// Create target dirif (!file_exists($targetDir)) {mkdir($targetDir,0777,true);}// Create target dirif (!file_exists($uploadDir)) {mkdir($uploadDir,0777,true);}// Get a file nameif (isset($_REQUEST["name"])) {$fileName = $_REQUEST["name"];} elseif (!empty($_FILES)) {$fileName = $_FILES["file"]["name"];} else {$fileName = uniqid("file_");}$oldName = $fileName;// $fileName = iconv('UTF-8','gb2312',$fileName);// print_r("文件名:".$fileName);$filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;// $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;// Chunking might be enabled$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;// Remove old temp filesif ($cleanupTargetDir) {if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory111."}, "id" : "id"}');}while (($file = readdir($dir)) !== false) {$tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;// If temp file is current file proceed to the nextif ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {continue;}// Remove temp file if it is older than the max age and is not the current file//新增判断文件是否存在,不然也会报错if (isset($tmpfilePath) && preg_match('/\.(part)$/', $file) && (filemtime($tmpfilePath) < time() - $maxFileAge)) {unlink($tmpfilePath);}}closedir($dir);}// Open temp file// print_r('\n');// $filePath = iconv('UTF-8','gb2312',$filePath);if (!$out = fopen("{$filePath}_{$chunk}.parttmp", "wb")) {die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream222."}, "id" : "id"}');}if (!empty($_FILES)) {if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file333."}, "id" : "id"}');}// Read binary input stream and append it to temp fileif (!$in = fopen($_FILES["file"]["tmp_name"], "rb")) {die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream444."}, "id" : "id"}');}} else {if (!$in = fopen("php://input", "rb")) {die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream555."}, "id" : "id"}');}}while ($buff = fread($in, 4096)) {fwrite($out, $buff);}fclose($out);fclose($in);rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");$index = 1;$done = true;for( $index = 1; $index < $chunks; $index++ ) {if ( !file_exists("{$filePath}_{$index}.part") ) {$done = false;break;}}if ($done) {$pathInfo = pathinfo($fileName);$hashStr = substr(md5($pathInfo['basename']),8,16);$hashName = time() . $hashStr . '.' .$pathInfo['extension'];$uploadPath = $uploadDir . DIRECTORY_SEPARATOR .$hashName;if (!$out = fopen($uploadPath, "wb")) {die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream666."}, "id" : "id"}');}//flock($hander,LOCK_EX)文件锁if ( flock($out, LOCK_EX) ) {for( $index = 0; $index < $chunks; $index++ ) {if (!$in = fopen("{$filePath}_{$index}.part", "rb")) {break;}while ($buff = fread($in, 4096)) {fwrite($out, $buff);}fclose($in);unlink("{$filePath}_{$index}.part");}flock($out, LOCK_UN);}fclose($out);$response = ['success'=>true,'oldName'=>$oldName,'filePath'=>$uploadPath,1,//'fileSize'=>$data['size'],'fileSuffixes'=>$pathInfo['extension'],//文件后缀名//'file_id'=>$data['id'],];return json($response);}// Return Success JSON-RPC responsedie('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');}//上传七牛接口public function upload(){// 获取表单上传文件 例如上传了001.jpg$filePath = request()->param('filePath'); //获取到上传的文件$fileName = request()->param('fileName'); //获取到上传的文件名addVideoToQiniuOss($fileName, $filePath);}//封装公用方法require '../vendor/qiniu/php-sdk/autoload.php';use Qiniu\Auth;use Qiniu\Storage\BucketManager;use Qiniu\Storage\UploadManager;use Qiniu\Zone;use Qiniu\Config as qiniuConfig;function addVideoToQiniuOss($saveName, $file){if ('' == $file) return '参数为空';//这里是需要安装`ThinkPHP5`的图像处理类库:// $ext = pathinfo($file->getInfo('name'), PATHINFO_EXTENSION); //后缀try {$config = Config::get('qiniu'); //获取Oss的配置//实例化对象 将配置传入// 上传到七牛后保存的文件名// $filename=str_replace('\\','/',$filename);//替换\斜杠// 需要填写你的 Access Key 和 Secret Key$accessKey = $config['accessKey'];$secretKey = $config['secretKey'];$bucket = $config['bucket'];$domain = $config['DOMAINImage'];// 构建鉴权对象$auth = new Auth($accessKey, $secretKey);// 生成上传 Token$token = $auth->uploadToken($bucket);// 要上传文件的本地路径$filePath = $file;// 上传到存储后保存的文件名$key = "video/" . $saveName;// 如果指定了断点记录文件,那么下次会从指定的该文件尝试读取上次上传的进度,以实现断点续传// $resumeFile = $id;// 分片上传可指定 version 字段,v2 表示使用分片上传 v2 , v1 表示 分片上传 v1 (默认 v1) , 选择 v2 可自定义分片大小,此处设为 6 MB,默认 4 MB// $version = 'v2';$partSize = 6 * 1024 * 1024;//华东z0,华南z2,华北z1//加速需配置$zone = Zone::zonez2(); // 华东:z0,华北:z1,华南:z2,北美:na0,东南亚:as0$qiniuconfig = new qiniuConfig($zone);$qiniuconfig->useHTTPS = false;// $cfg = new qiniuConfig($zone);// 初始化 UploadManager 对象并进行文件的上传。$uploadMgr = new UploadManager($qiniuconfig);// echo $filePath;// 调用 UploadManager 的 putFile 方法进行文件的上传。list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);if ($err !== null) {var_dump($err);return vae_assign(202, '上传错误', [$err]);} else {// var_dump($ret);$arr = [//视频地址'result' => $domain.'/'.$ret['key'],//视频封面地址'imgName' => $domain.'/'.$ret['key'].'?vframe/jpg/offset/5'];if(file_exists($file)){$res = unlink($file);if($res){return vae_assign(200, '上传成功', $arr);}else{return vae_assign(202, '删除文件失败');}}//将结果输出}} catch (OssException $e) {printf(__FUNCTION__ . ": FAILED\n");printf($e->getMessage() . "\n");return;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。