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, // 不压缩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');
                    
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员张礼奎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值