webuploader实现大文件断点续传
前端代码(基于Yii框架，逻辑可供参考)
<script>
var fileMd5; //文件MD5
var fileObj; //文件对象
var state = 'pending'; //状态
WebUploader.Uploader.register({
"before-send": "beforeSend",
"after-send-file": "afterSendFile"
}, {
beforeSend: function (block) {
//每个分片开始上传前检查分片是否存在
var deferred = WebUploader.Deferred();
$.post('<?=Url::to(['video-upload/check-chunk'])?>', {
fileMd5: fileMd5,
chunk: block.chunk
}, function (res) {
//不存在继续下一步
if (res.code == 1) {
deferred.resolve();
} else {
//已存在直接跳过
deferred.reject();
}
}, 'json');
//把fileMd5作为参数传入upload接口，配置项里无法直接配置所以放在这里
this.owner.options.formData.fileMd5 = fileMd5;
return deferred.promise();
},
afterSendFile: function () {
$.post('<?=Url::to(['video-upload/merge-chunks'])?>', {
fileMd5: fileMd5,
}, function (res) {
$('#videoupload-url').val(res.path);
$('#message').text(res.message);
}, 'json');
}
});
var uploader = new WebUploader.Uploader({
// 自动上传。
auto: false,
// swf文件路径
swf: '/webuploader/Uploader.swf',
// 文件接收服务端。
server: '<?=Url::to(['video-upload/upload'])?>',
sendAsBinary: false,
method: 'POST',
pick: '#upload',
// 只允许选择MP4文件
accept: {
extensions: 'mp4',
mimeTypes: 'video/mp4'
},
resize: false,
chunked: true, //开启分片上传
chunkSize: 2 * 1024 * 1024, //分片大小2M
threads: 1,
//单个文件的大小 50M
fileSingleSizeLimit: 50 * 1024 * 1024
});
uploader.on('fileQueued', function (file) {
//计算文件的唯一标记fileMd5，用于断点续传 如果.md5File(file)方法里只写一个file参数则计算MD5值会很慢 所以加了后面的参数：50*1024*1024，此处的大小取决于配置中的fileSingleSizeLimit
(new WebUploader.Uploader()).md5File(file, 0, 50 * 1024 * 1024).progress(function (percentage) {
}).then(function (val) {
$('#message').text("成功获取文件信息!");
fileMd5 = val;
//检查文件上传进度
$.post('<?=Url::to(['video-upload/check-file'])?>', {
fileMd5: fileMd5,
}, function (res) {
if (res.code === 200) {
$(".progress-bar").css('width', res.percent);
$(".progress-bar").text(res.percent);
if (res.percent == '0%') {
$("#btn").text('开始上传');
} else if (res.percent == '100%') {
$("#btn").text('上传完毕');
} else {
$("#btn").text('开始上传');
}
}
}, 'json');
});
uploader.stop(true);
});
uploader.on('uploadProgress', function (file, percentage) {
//动态更改上传进度
var percent = Math.round(percentage * 100) + '%';
$(".progress-bar").css('width', percent);
$(".progress-bar").text(percent);
$("#message").val('上传中...');
});
uploader.on('error', function (error) {
//错误处理
console.log(error);
$("#btn").val('开始上传');
uploader.stop(true);
if (error == 'F_EXCEED_SIZE') {
$('#message').text('文件最大限制为50M');
} else {
$('#message').text(error);
}
});
uploader.on('all', function (type) {
//实时监听上传状态
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
} else if (type === 'fileQueued') {
state = 'queued';
}
if (state === 'uploading') {
$("#btn").text('暂停上传');
} else if (state === 'paused') {
$("#btn").text('继续上传');
} else if (state === 'queued') {
$("#btn").removeAttr('disabled');
} else if (state === 'done') {
$("#btn").text('上传完毕');
$("#btn").attr('disabled', 'disabled');
}
});
uploader.on('uploadSuccess', function (file, response) {
$(".progress-bar").css('width', '100%');
$(".progress-bar").text('100%');
$("#btn").text('上传完毕');
$("#btn").attr('disabled', 'disabled');
});
//手动操作视频上传/暂停/继续
$("#btn").click(function () {
if (state === 'uploading') {
uploader.stop(true);
return false;
}
uploader.upload(fileObj);
});
</script>
后端接口代码
/**
* 分片上传
* @return array
*/
public function actionUpload()
{
if (Yii::$app->request->isPost) {
Yii::$app->response->format = Response::FORMAT_JSON;
$file = UploadedFile::getInstanceByName('file');
$chunk = Yii::$app->request->post('chunk', 0);
$fileMd5 = Yii::$app->request->post('fileMd5');
$chunks = Yii::$app->request->post('chunks', 1);
$percent = ((round(($chunk + 1) / $chunks, 2)) * 100) . '%';
//记录该文件的上传进度
Yii::$app->cache->set($fileMd5, $percent);
//把分片内容按照一定规律存储
rename($file->tempName, $this->tempFile($fileMd5, $chunk));
return [
'code' => 200,
'message' => 'success',
];
}
}
/**
* 合并所有分片
* @return array
*/
public function actionMergeChunks()
{
$fileMd5 = Yii::$app->request->post('fileMd5');
$full = $this->tempFile($fileMd5);
$fp = fopen($full, 'wb');
$i = 0;
while (file_exists($this->tempFile($fileMd5, $i))) {
$content = file_get_contents($this->tempFile($fileMd5, $i));
fwrite($fp, $content);
//删除分片
unlink($this->tempFile($fileMd5, $i));
$i++;
}
fclose($fp);
Yii::$app->cache->delete($fileMd5);
Yii::$app->response->format = Response::FORMAT_JSON;
$data = [
'code' => 200,
'message' => 'success',
'path' => '../upload/' . $fileMd5 . '.mp4',
];
return $data;
}
/**
* 分片上传前检查分片是否已存在
*/
public function actionCheckChunk()
{
if (Yii::$app->request->isPost) {
Yii::$app->response->format = Response::FORMAT_JSON;
$fileMd5 = Yii::$app->request->post('fileMd5');
$chunk = Yii::$app->request->post('chunk', 0);
if (file_exists($this->tempFile($fileMd5, $chunk))) {
return [
'code' => 0,
'message' => 'chunk_exists',
];
} else {
return [
'code' => 1,
'message' => 'chunk_not_exists',
];
}
}
}
/**
* 开始上传前检查文件上传进度
* @return array
*/
public function actionCheckFile()
{
Yii::$app->response->format = Response::FORMAT_JSON;
$fileMd5 = Yii::$app->request->post('fileMd5');
$percent = Yii::$app->cache->get($fileMd5) ? Yii::$app->cache->get($fileMd5) : '0%';
return [
'code' => 200,
'percent' => $percent,
];
}
/**
* 获取格式化的文件名
* @param $fileMd5
* @param null $chunk
* @return bool|string
*/
private function tempFile($fileMd5, $chunk = null)
{
$tempFile = Yii::getAlias('@webroot/upload/' . $fileMd5);
if (is_null($chunk)) {
$tempFile .= '.mp4';
} else {
$tempFile .= '.chunk' . $chunk;
}
return $tempFile;
}
参考文章：http://blog.ncmem.com/wordpress/2023/11/17/webuploader%e5%ae%9e%e7%8e%b0%e5%a4%a7%e6%96%87%e4%bb%b6%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/
欢迎入群一起讨论
