序言：我們上傳大文件的時候，往往會上傳失敗渣叛。對多數(shù)情況下丈秩，修改配置文件即可使用〈狙茫可是這樣往往不能很好的解決對于大型文件的上傳蘑秽。比如1GB的視頻文件。這時候就需要我們將文件切分成一個個小文件來上傳滤祖。最后在進(jìn)行重新的整合筷狼。
以thinkphp5.1為例：
我們設(shè)定一個場景：我需要上傳一個大于1G的音頻、或者視頻文件匠童，并且要上傳到第三方服務(wù)器埂材。那么、第一步：我們需要將資源文件切片先上傳到自己的服務(wù)器上汤求，然后重新整合為一個文件俏险。第二部：將其上傳到第三方（也是斷續(xù)上傳）。
代碼示例：
1.前端使用 webuploader
html 代碼大致為：
<link rel="stylesheet" type="text/css" href="/css/plugins/webuploader/webuploader.css">
<script src="/js/plugins/webuploader/webuploader.min.js?v=2"></script>
<div class="form-group">
<label class="col-sm-4 control-label">視頻上傳：</label>
<div class="col-sm-8">
<div class="wu-example">
<!-- 用來存放文件信息 -->
<div id="video_content" class="uploader-list "></div>
<div class="btns">
<div id="picker_video">選擇視頻</div>
<div id="upload_video" class="btn btn-primary hidden">開始上傳</div>
<div id="cancelFile_video" class="btn btn-default hidden">取消上傳</div>
<input type="hidden" name="videoPath" id="videoPath" value="">
</div>
</div>
</div>
</div>
頁面js為：
fileupload({
server: "{:url('/course/upload')}",
progressId: 'video_content',
type: 'video',
pickerId: 'picker_video',
uploadId: 'upload_video',
cancelId: 'cancelFile_video',
chunked: true,
path: $('input[id="courseId"]').val(),
success: function(data) {
$("#videoPath").val(data.path);
}
});
fileupload方法所用的js腳本為：
window.fileupload = function(options) {
var config = {
server: '', // 上傳服務(wù)器地址 必填
cancelServer: '', // 取消的服務(wù)器地址
progressId: '', // 進(jìn)度條容器 必填
type: '', // video audio 默認(rèn)為圖片
pickerId: '', // 選擇文件ID 必填
title: '文件上傳', //
auto: false, // 自動上傳
multiple: false, // 多選
chunked: false, // 分片
uploadId: '',//上傳id
cancelId: '',//取消id 視頻音頻有扬绪，圖片沒有
path:'', // 子目錄
imgType:'', // 上傳圖片類型
data: {
}, //取消上傳的參數(shù)
success: function(data) {
console.log(data);
}
};
$.extend(config, options);
var _extensions = 'gif,jpg,jpeg,bmp,png';
var _mimeTypes = 'image/*';
if (config.type && config.type == 'video') {
_extensions = '3gp,mp4,rmvb,mov,avi,mkv';
_mimeTypes = 'video/*';
} else if (config.type && config.type == 'audio') {
_extensions = 'WMA,MP3,MIDI';
_mimeTypes = 'audio/*';
}
var $list = $("#" + config.progressId);
var _file = '';
var uploader = 'uploader' + config.progressId;
uploader = WebUploader.create({
auto: config.auto, // 是否自動上傳
pick: {
id: '#' + config.pickerId,
name: "file", // 這個地方 name
// 沒什么用竖独，雖然打開調(diào)試器，input的名字確實(shí)改過來了挤牛。但是提交到后臺取不到文件莹痢。如果想自定義file的name屬性，還是要和fileVal
// 配合使用墓赴。
// label: '選擇文件',
multiple: config.multiple
// 默認(rèn)為true竞膳，就是可以多選
},
swf: '/js/plugins/webuploader/Uploader.swf',
// fileVal:'multiFile', //自定義file的name屬性，我用的版本是0.1.5 ,打開客戶端調(diào)試器發(fā)現(xiàn)生成的input
// 的name 沒改過來诫硕。
// 名字還是默認(rèn)的file,但不是沒用哦坦辟。雖然客戶端名字沒改變，但是提交到到后臺章办，是要用multiFile 這個對象來取文件的锉走，用file
// 是取不到文件的
server: config.server,
duplicate: true, // 是否可重復(fù)選擇同一文件
resize: false,
formData: {
"status": "file",
"contentsDto.contentsId": "0000004730",
"uploadNum": "0000004730",
"existFlg": 'false',
"path":config.path,
"imgType":config.imgType
},
compress: null,
chunked: config.chunked, // 分片處理
chunkSize: 50 * 1024 * 1024, // 每片50M,經(jīng)過測試，發(fā)現(xiàn)上傳1G左右的視頻大概每片50M速度比較快的藕届，太大或者太小都對上傳效率有影響
chunkRetry: 2, // 如果失敗挪蹭，則不重試 2為失敗可以重復(fù)
threads: 1, // 上傳并發(fā)數(shù)。允許同時最大上傳進(jìn)程數(shù)翰舌。
// runtimeOrder: 'flash',
disableGlobalDnd: true,
timeout: 600000,
accept: {
title: config.title, //文字描述
extensions: _extensions, //允許的文件后綴嚣潜，不帶點(diǎn)，多個用逗號分割椅贱。,jpg,png,
mimeTypes: _mimeTypes, //多個用逗號分割懂算。,
}
});
// 當(dāng)有文件被添加進(jìn)隊(duì)列的時候
uploader.on('fileQueued', function(file) {
_file = file;
$list.html('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上傳...</p>' +
'</div>');
if(config.cancelId){
$('#'+config.uploadId).removeClass('hidden').siblings('#'+config.cancelId).addClass('hidden');
}else{
$('#'+config.uploadId).removeClass('hidden');
}
});
// 文件上傳過程中創(chuàng)建進(jìn)度條實(shí)時顯示只冻。
uploader.on('uploadProgress', function(file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重復(fù)創(chuàng)建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<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, data) {
if (data.error) {
alert(data.error.message);
$('#' + file.id).find('p.state').text('上傳出錯');
config.cancelId ? $("#"+config.cancelId).addClass('hidden') : '';
return;
}
$('#' + file.id).find('p.state').text('已上傳');
if (config.success) {
config.success(data);
}
if(config.cancelId){
$("#"+config.cancelId).addClass('hidden');
}
});
uploader.on('uploadError', function(file) {
$('#' + file.id).find('p.state').text('上傳出錯');
if(config.cancelId){
$("#"+config.cancelId).addClass('hidden');
}
});
/** * 驗(yàn)證文件格式以及文件大小 */
uploader.on("error", function(type, handler) {
if (type == "Q_TYPE_DENIED"&&config.type=='video') {
alert('請上傳正確格式的視頻!(如mp4)');
}else if(type == "Q_TYPE_DENIED"&&config.type=='audio'){
alert('請上傳正確格式的視頻!(如mp3)');
}else{
alert('請上傳正確格式的圖片!');
}
if(config.cancelId){
$("#"+config.cancelId).addClass('hidden');
}
});
uploader.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').fadeOut();
});
if(config.cancelId){
$("#"+config.cancelId).on('click', function() {
uploader.cancelFile(_file);
$('#' + _file.id).find('p.state').text('上傳出錯').end()
.find('.progress').remove();
$(this).addClass('hidden');
$('#'+config.uploadId).addClass('hidden');
$ajax(config.cancelServer, 'get', config.data, function(data) {}, function() {});//取消執(zhí)行的請求
});
}
$("#"+config.uploadId).on("click", function() {
uploader.upload();
$(this).addClass('hidden');
$('#'+config.cancelId).removeClass('hidden');
})
}
2.后端控制器的代碼：
我從前端傳入了用于制作子目錄的參數(shù)，如我將課程的id作為子目錄计技。并且通過判斷文件的類型喜德，將視頻、音頻文件分開存放垮媒。
/**
* 大文件分段上傳
* @return string
*/
public function uploadFile(){
$path= input('path'); // 課程id用于制作子目錄
// 判斷文件類型
if (isset($_REQUEST["name"])) {
$fileName = $_REQUEST["name"];
} elseif (!empty($_FILES)) {
$fileName = $_FILES["file"]["name"];
} else {
$fileName = uniqid("file_");
}
$exeArr = explode('.', $fileName);
if(is_array($exeArr)){
$exe = end($exeArr); // 文件后綴
}else{
die('{"error" : {"message": "文件類型錯誤"}}');
}
$UploadService = new UploadService();
$videoExe = $UploadService->videoExe; // 視頻類型數(shù)組
$audioExe = $UploadService->audioExe; // 音頻類型數(shù)組
// 判斷服務(wù)器上傳目錄
$targetDir = '../public/static/course/other/'; // 服務(wù)器初始緩存目錄
$uploadDir = '../public/static/course/other/'; // 服務(wù)器初始上傳目錄
$servicePath = '/course/other/'; // 又拍云初始文件地址
if($path){
if(in_array($exe,$videoExe)){
$targetDir = '../public/static/course/'.$path.'/video/'; // 服務(wù)器緩存目錄
$uploadDir = '../public/static/course/'.$path.'/video/'; // 服務(wù)器上傳目錄
$servicePath = '/course/'.$path.'/video/'; // 又拍云文件地址
}
if(in_array($exe,$audioExe)){
$targetDir = '../public/static/course/'.$path.'/audio/'; // 服務(wù)器緩存目錄
$uploadDir = '../public/static/course/'.$path.'/audio/'; // 服務(wù)器上傳目錄
$servicePath = '/course/'.$path.'/audio/'; // 又拍云文件地址
}
}
// 切片上傳
$fileInfo = $UploadService->uploadBlock($targetDir,$uploadDir);
// 上傳至又拍云
if(!empty($fileInfo['uploadPath'])){
$uploadPath = $fileInfo['uploadPath']; // 服務(wù)器文件路徑
$resultPath = $UploadService->uploadYouPaiYun($uploadPath,$exe,$servicePath,true);
return json(['url'=>$UploadService->uPaiUrl,'path'=>$resultPath]);
}
}
控制器去調(diào)用上傳方法舍悯，這里我將上傳方法封裝為了服務(wù)：
image.png
UploadService里面的代碼為：
<?php
/**
* Created by PhpStorm.
* User: cdjyj21
* Date: 2018/6/2
* Time: 9:16
*/
namespace app\services;
use Upyun\Upyun;
use Upyun\Config;
class UploadService
{
// 視頻類型數(shù)組
public $videoExe = ['3gp','mp4','rmvb','mov','avi','mkv'];
// 音頻類型數(shù)組
public $audioExe = ['wma','mp3','midi'];
// 又拍云地址
public $uPaiUrl = 'http://xxxxxxxx.com';
/**
* 大文件切片上傳
* @param string $targetDir
* @param string $uploadDir
* @return array
*/
public function uploadBlock($targetDir='',$uploadDir=''){
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
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 time
@set_time_limit(5 * 60);
// Uncomment this one to fake upload time
// usleep(5000);
// Settings
// $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
$cleanupTargetDir = true; // 開啟文件緩存刪除
$maxFileAge = 60*60*24; // 文件緩存時間超過時間自動刪除
// 驗(yàn)證緩存目錄是否存在不存在創(chuàng)建
if (!file_exists($targetDir)) {
@mkdir($targetDir,0777,true);
}
// 驗(yàn)證緩存目錄是否存在不存在創(chuàng)建
if (!file_exists($uploadDir)) {
@mkdir($uploadDir,0777,true);
}
// Get 或 file 方式獲取文件名
if (isset($_REQUEST["name"])) {
$fileName = $_REQUEST["name"];
} elseif (!empty($_FILES)) {
$fileName = $_FILES["file"]["name"];
} else {
$fileName = uniqid("file_");
}
$oldName = $fileName;//記錄文件原始名字
$filePath = $targetDir . $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;
// 刪除緩存校驗(yàn)
if ($cleanupTargetDir) {
if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
}
while (($file = readdir($dir)) !== false) {
$tmpfilePath = $targetDir . $file;
// If temp file is current file proceed to the next
if ($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 (preg_match('/\.(part|parttmp|mp4)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
@unlink($tmpfilePath);
}
}
closedir($dir);
}
// 打開并寫入緩存文件
if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {
die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
}
if (!empty($_FILES)) {
if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) { // 指定的文件是否是通過 HTTP POST 上傳的
die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
}
// Read binary input stream and append it to temp file
if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
}
} else {
if (!$in = @fopen("php://input", "rb")) {
die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
}
}
while ($buff = fread($in, 50 * 1024 * 1024)) {
fwrite($out, $buff);
}
@fclose($out);
@fclose($in);
rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");
$index = 0;
$done = true;
for( $index = 0; $index < $chunks; $index++ ) {
if ( !file_exists("{$filePath}_{$index}.part") ) {
$done = false;
break;
}
}
//文件全部上傳 執(zhí)行合并文件
if ( $done ) {
$pathInfo = pathinfo($fileName);
$hashStr = substr(md5($pathInfo['basename']),8,16);
$hashName = time() . $hashStr . '.' .$pathInfo['extension'];
$uploadPath = $uploadDir .$hashName;
if (!$out = @fopen($uploadPath, "wb")) {
die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
}
if ( flock($out, LOCK_EX) ) {
for( $index = 0; $index < $chunks; $index++ ) {
if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {
break;
}
while ($buff = fread($in, 50 * 1024 * 1024)) {
fwrite($out, $buff);
}
@fclose($in);
@unlink("{$filePath}_{$index}.part");
}
flock($out, LOCK_UN);
}
@fclose($out);
return ['uploadPath'=>$uploadPath]; // 拋出文件路徑
}
}
/**
* 上傳又拍云
* @param $uploadPath
* @param $exe
* @param $servicePath
* @param $unlink
* @return string
*/
public function uploadYouPaiYun($uploadPath,$exe,$servicePath,$unlink){
// 上傳又拍云
$bucketConfig = new Config('xxx', 'xxx', 'xxx'); // 配置參數(shù)，詳情請見又拍云官方文檔
$client = new Upyun($bucketConfig); // 實(shí)例化又拍云 傳入配置參數(shù)
$file = fopen($uploadPath, 'r');
$name = md5(time().randomChars(10));
$serviceFile = $servicePath.$name.'.'.$exe;
$client->write($serviceFile, $file);
// 是否刪除本地服務(wù)器上的視頻
if($unlink){
@unlink($uploadPath);
}
return $serviceFile;
}
/**
* 刪除又拍云上的文件
* @param $path
*/
public function delFileUPaiYun($path){
$bucketConfig = new Config('xxx', 'xxx', 'xxx'); // 配置參數(shù)睡雇，詳情請見又拍云官方文檔
$client = new Upyun($bucketConfig); // 實(shí)例化又拍云 傳入配置參數(shù)
$client->delete($path);
}
}
即：通過 uploadBlock 方法將大文件切片上傳至服務(wù)器萌衬，然后將每一個小文件重新整合。然后在通過 uploadYouPaiYun 方法將大文件上傳至又拍云它抱。
3秕豫、文件斷續(xù)上傳至又拍云淺析
先composer引入又拍云的包：
image.png
我們先來看看又拍云的
Upyun.php 文件里面的 write 方法
public function write($path, $content, $params = array(), $withAsyncProcess = false)
{
if (!$content) {
throw new \Exception('write content can not be empty.');
}
$upload = new Uploader($this->config);
$response = $upload->upload($path, $content, $params, $withAsyncProcess);
if ($withAsyncProcess) {
return $response;
}
return Util::getHeaderParams($response->getHeaders());
}
可見其調(diào)用了 Uploader.php 文件里面的 upload 方法
public function upload($path, $file, $params, $withAsyncProcess)
{
$stream = Psr7\stream_for($file);
$size = $stream->getSize();
$useBlock = $this->needUseBlock($size);
if ($withAsyncProcess) {
$req = new Form($this->config);
return $req->upload($path, $stream, $params);
}
if (! $useBlock) {
$req = new Rest($this->config);
return $req->request('PUT', $path)
->withHeaders($params)
->withFile($stream)
->send();
} else {
return $this->pointUpload($path, $stream, $params);
}
}
upload 方法調(diào)用了 needUseBlock 方法來進(jìn)行是否需要斷續(xù)上傳的判斷。
private function needUseBlock($fileSize)
{
if ($this->config->uploadType === 'BLOCK') {
return true;
} elseif ($this->config->uploadType === 'AUTO' &&
$fileSize >= $this->config->sizeBoundary) {
return true;
} else {
return false;
}
}
如果判斷文件需要斷續(xù)上傳的話观蓄，則調(diào)用Uploader.php 文件里面的 pointUpload 方法
/**
* 斷點(diǎn)續(xù)傳
* @param $path
* @param $stream
* @param $params
*
* @return mixed|\Psr\Http\Message\ResponseInterface
* @throws \Exception
*/
private function pointUpload($path, $stream, $params)
{
$req = new Rest($this->config);
$headers = array();
if (is_array($params)) {
foreach ($params as $key => $val) {
$headers['X-Upyun-Meta-' . $key] = $val;
}
}
$res = $req->request('PUT', $path)
->withHeaders(array_merge(array(
'X-Upyun-Multi-Stage' => 'initiate',
'X-Upyun-Multi-Type' => Psr7\mimetype_from_filename($path),
'X-Upyun-Multi-Length' => $stream->getSize(),
), $headers))
->send();
if ($res->getStatusCode() !== 204) {
throw new \Exception('init request failed when poinit upload!');
}
$init = Util::getHeaderParams($res->getHeaders());
$uuid = $init['x-upyun-multi-uuid'];
$blockSize = 1024 * 1024;
$partId = 0;
do {
$fileBlock = $stream->read($blockSize);
$res = $req->request('PUT', $path)
->withHeaders(array(
'X-Upyun-Multi-Stage' => 'upload',
'X-Upyun-Multi-Uuid' => $uuid,
'X-Upyun-Part-Id' => $partId
))
->withFile(Psr7\stream_for($fileBlock))
->send();
if ($res->getStatusCode() !== 204) {
throw new \Exception('upload request failed when poinit upload!');
}
$data = Util::getHeaderParams($res->getHeaders());
$partId = $data['x-upyun-next-part-id'];
} while ($partId != -1);
$res = $req->request('PUT', $path)
->withHeaders(array(
'X-Upyun-Multi-Uuid' => $uuid,
'X-Upyun-Multi-Stage' => 'complete'
))
->send();
if ($res->getStatusCode() != 204 && $res->getStatusCode() != 201) {
throw new \Exception('end request failed when poinit upload!');
}
return $res;
}
