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, // 不压缩image
swf: '__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, // 所有文件总大小限制 6G
fileSingleSizeLimit: 10 * 1024 * 1024 * 1024, // 单个文件大小限制 5 G
formData: {
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');