TAY
笔记 · · 阅读 88

laravel 七牛云直传文件

安装qiniu/php-sdk

composer require qiniu/php-sdk

上传控制器

use Qiniu\Storage\UploadManager;
use Qiniu\Auth as Authed;
public function vtoken(Request $request)
{
    if($request->isMethod('post')){
        $accessKey = ''; // 自己的accessKey
        $secretKey = ''; // 自己的secretKey
        $bucket = ''; // 自己的空间名称
        $uploadMgr = new UploadManager();
        $auth = new Authed($accessKey, $secretKey);
        $token = $auth->uploadToken($bucket);
        return ['user_id'=>Auth::user()->id, 'uptoken'=>$token];
    }
}

javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.1.2/qiniu.min.js"></script>
<script>
function uploadQiNiu() {
$.ajax({
    // 获取七牛云uptoken
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "/upload/vtoken",
    type: 'post',
    success: function(res) {
        // 七牛云uptoken
        var user_id = res.user_id;
        var token = res.uptoken;
        // config信息 object 参数可选
        var config = {
            //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
            useCdnDomain: true,
            // 是否禁用日志报告,为布尔值,默认为 false。
            disableStatisticsReport: false,
            // 选择上传域名区域;当为 null 或 undefined 时,自动分析上传域名区域。
            retryCount: 3,
            // 选择上传域名区域;当为 null 或 undefined 时,自动分析上传域名区域。
            region: null,
            // 是否开启 MD5 校验,为布尔值;在断点续传时,开启 MD5 校验会将已上传的分片与当前分片进行 MD5 值比对,若不一致,则重传该分片,避免使用错误的分片。读取分片内容并计算 MD5 需要花费一定的时间,因此会稍微增加断点续传时的耗时,默认为 false,不开启。
            checkByMD5: true,
            // 分片上传时每片的大小
            chunkSize: 4,
        };

        // putExtra
        var putExtra = {
            customVars: {}
        };
        // 定义上传文件
        var file = $("#fileBtn")[0].files[0]
        // 设置key key为上传后的文件名 自定义即可
        var key = 'video/'+user_id+'/'+file.name;

        const observable = qiniu.upload(file, key, token, putExtra, config)
        // 开始上传
        observable.subscribe({
            next: (result) => {
                //上传进度
                if (result.total.percent > 0) {
                    $('#totalBar').text(result.total.percent);
                }
            },
            error: () => {
                //上传失败
                alert('error');
            },
            complete: (res) => {
                //上传成功
                console.log(res);
                // res.key video/关于layout布局文件.mp4
                // hash lgbRfPjwwK5LKH-wKsnahr_dkUg
                //alert('success');
            },
        });

    }
})
}
</script>

html表单

<form method="post" enctype="multipart/form-data">
    <input id="fileBtn" class="upload" type="file">
    <div id="totalBar"></div>
    <input type="button" value="上传" onclick="uploadQiNiu()"/>
</form>

视频信息

视频地址加
?avinfo,视频详情数据
?vframe/jpg/offset/1,视频封面截取,1是第一秒。
?vframe/jpg/offset/1/w/480/h/360,视频第一秒封面宽高。

目录