腾讯云oss前端上传视频大文件

kn
2021-03-17 08:54:45
php

1.服务端使用该接口获取临时key和secret

public function getTmpKey()
{
    $config = \Yaf_Registry::get('config');
    $callConfig = $config->cdn;

    $sts = new Sts();
    $config = array(
        'url' => 'https://sts.tencentcloudapi.com/',
        'domain' => 'sts.tencentcloudapi.com',
        'proxy' => '',
        'secretId' => $callConfig['apiKeyId'], // 固定密钥
        'secretKey' => $callConfig['apiKeySecret'], // 固定密钥
        'bucket' => $callConfig['videoBucket'], // 固定密钥
        'region' => $callConfig['region'], // 固定密钥
        'durationSeconds' => 1800, // 密钥有效期
        // 允许操作（上传）的对象前缀，可以根据自己网站的用户登录态判断允许上传的目录，例子： user1/* 或者 * 或者a.jpg
        // 请注意当使用 * 时，可能存在安全风险，详情请参阅：https://cloud.tencent.com/document/product/436/40265
        'allowPrefix' => '*',
        // 密钥的权限列表。简单上传和分片需要以下的权限，其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
        'allowActions' => array (
            // 所有 action 请看文档 https://cloud.tencent.com/document/product/436/31923
            // 简单上传
            'name/cos:PutObject',
            'name/cos:PostObject',
            // 分片上传
            'name/cos:InitiateMultipartUpload',
            'name/cos:ListMultipartUploads',
            'name/cos:ListParts',
            'name/cos:UploadPart',
            'name/cos:CompleteMultipartUpload'
        )
    );
    // 获取临时密钥，计算签名
    $tempKeys = $sts->getTempKeys($config);

    // 返回数据给前端
    header('Content-Type: application/json');
    header('Access-Control-Allow-Origin: http://saas.edu.ke.com'); // 这里修改允许跨域访问的网站
    header('Access-Control-Allow-Headers: origin,accept,content-type');
    return $tempKeys;
}

2.前端调用

cos-js-sdk-v5-master.zip

<script src="/js/cos-js-sdk-v5.min.js"></script>

var getAuthorization = function (options, callback) {
    var url = '/Oss/getTmpKey'; 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function (e) {
        try {
            var data = JSON.parse(e.target.responseText);
            var credentials = data.data.credentials;
        } catch (e) {
        }
        if (!data || !credentials) return console.error('credentials invalid');
        var authorization = COS.getAuthorization({
            SecretId: credentials.tmpSecretId, // 可传固定密钥或者临时密钥
            SecretKey: credentials.tmpSecretKey, // 可传固定密钥或者临时密钥
            Method: options.Method,
            Pathname: options.Pathname,
            Query: options.Query,
            Headers: options.Headers,
            Expires: 900,
        });
        callback({
            Authorization: authorization,
            XCosSecurityToken: credentials.sessionToken,
        });
    };
    xhr.send();
};

var cos = new COS({
    getAuthorization: getAuthorization,
    // UploadCheckContentMd5: true,
});

var file = event.target.files[0]
console.log(file[0])

if (file.size > 1024 * 1024) {
    console.log('大文件')
    cos.sliceUploadFile({
        Bucket: videoBucket,
        Region: Region,
        Key: file_name,
        Body: file,
        onTaskReady: function (tid) {
            TaskId = tid;
        },
        onHashProgress: function (progressData) {
            console.log('onHashProgress')
            console.log(JSON.stringify(progressData));
        },
        onProgress: function (progressData) {
            console.log('onProgress')
            video_resource_progress = parseInt(progressData.loaded/progressData.total)*100;
            console.log(JSON.stringify(progressData));
        },
    }, function (err, data) {
        if(err.statusCode == 200){
            var tm = {};
            tm.url = 'http://'+err.Location;
            tm.video_path = err.Key;
        }
        console.log(err);
        console.log(data);
    });
} else {
    console.log('小文件')
    cos.putObject({
        Bucket: videoBucket,
        Region: Region,
        Key: file.name,
        Body: file,
        onTaskReady: function (tid) {
            TaskId = tid;
        },
        onHashProgress: function (progressData) {
            console.log('onHashProgress')
            console.log(JSON.stringify(progressData));
        },
        onProgress: function (progressData) {
            console.log('onProgress')
            video_resource_progress = parseInt(progressData.loaded/progressData.total)*100;
            console.log(JSON.stringify(progressData));
        },
    }, function (err, data) {
        console.log(err);
        console.log(data);
        if(err.statusCode == 200){
            var tm = {};
            tm.url = 'http://'+err.Location;
            tm.video_path = err.Key;
        }
    });
}

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏