tp5+layui上传视频至七牛云

进度条

<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadProgress">
     <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>

js部分

$(function (){
        //获取上传token，成功后初始化绑定上传事件
        $.ajax({
            url: "{:url('admin/common_file/getToken')}",
            success: function(res){
                var token = res.data.token;
                var domain = res.data.domain;
                var config = {
                    useCdnDomain: true,
                    disableStatisticsReport: false,
                    retryCount: 6
                };
                var putExtra = {
                    fname: "",
                    params: {},
                    mimeType: null
                };
                //调用上传方法
                uploadWithSDK(token, putExtra, config, domain);
            }
        })

    });

    //上传
    function uploadWithSDK(token, putExtra, config, domain) {
        //通过class绑定多个上传file
        $(".select").unbind("change").bind("change",function(){

            var file = this.files[0];
            var finishedAttr = [];
            var compareChunks = [];
            var observable;
            if (file) {
                var key = file.name;

                putExtra.params["x:name"] = key.split(".")[0];

                // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
                var error = function(err) {
                    layer.msg("上传失败");
                };

                //上传完成后通知处理
                var complete = function(res) {
                    var fileUrl = 'https://' +domain + '/' + res.key;
                    $('.video_url').val(fileUrl);
                    $('.video_show').css('display', 'block');
                    $('.video_show').attr('src', fileUrl);
                };

                //上传进度
                var next = function(response) {
                    var chunks = response.chunks||[];
                    var total = response.total;
                    // 这里对每个chunk更新进度，并记录已经更新好的避免重复更新，同时对未开始更新的跳过
                    for (var i = 0; i < chunks.length; i++) {
                        if (chunks[i].percent === 0 || finishedAttr[i]){
                            continue;
                        }
                        if (compareChunks[i].percent === chunks[i].percent){
                            continue;
                        }
                        if (chunks[i].percent === 100){
                            finishedAttr[i] = true;
                        }
                    }
                    element.progress('uploadProgress',total.percent.toFixed(2) + '%');

                    compareChunks = chunks;
                };

                var subObject = {
                    next: next,
                    error: error,
                    complete: complete
                };
                var subscription;

                //修改文件上传名称
                var nameTou = dateFtt(new Date(), "yyyyMMddhhmmss")+"-"+randomn(6)+"-";
                key = nameTou+key;
                // 调用sdk上传接口获得相应的observable，控制上传和暂停
                observable = qiniu.upload(file, key, token, putExtra, config);
                //
                subscription = observable.subscribe(subObject);

            }
        })
    }
    
    function dateFtt(date,fmt) {
        if(fmt==null){
            fmt = 'yyyy-MM-dd hh:mm:ss';
        }
        var o = {
            "M+": date.getMonth() + 1, //月份
            "d+": date.getDate(), //日
            "h+": date.getHours(), //小时
            "m+": date.getMinutes(), //分
            "s+": date.getSeconds(), //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds() //毫秒
        };
        if(/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for(var k in o)
            if(new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    function randomn(n) {
        if(n==null){
            n=6;
        }
        var res = ''
        for (; res.length < n; res += Math.random().toString(36).substr(2).toUpperCase()) {}
        return res.substr(0, n)
    }

php部分

public function getToken(){
        // 需要填写你的 Access Key 和 Secret Key
        $accessKey = config('qiniu.AccessKey');
        $secretKey = config('qiniu.SecretKey');
        // 构建鉴权对象
        $auth = new Auth($accessKey, $secretKey);
        // 要上传的空间
        $bucket = config('qiniu.bucket');
        $domain  = config('qiniu.domain');
        if (!$token = $auth->uploadToken($bucket)){
            $this->setError('上传失败');
            return false;
        }
        return ['domain' => $domain, 'token' => $token];
    }

附图一张