php使用腾讯云COS(直传PHP后端签名)

7 篇文章 0 订阅

使用的框架是laravel 直传数据到cos
1.写一个路由

在这里插入代码片//cos签名
    public function getSign(Request $request){
      //判断如果没有登录直接返回
		判断是不是本站不是直接return返回 禁止使用直传
      $sts = new STS();
// 配置参数
//      echo env("COSV5_SECRET_ID");
//      echo "<br>";
//      echo env("COSV5_SECRET_KEY");
//      echo "<br>";
//      echo env("OSS_IMG_BUCKET");
//      echo "<br>";
//      echo env("COSV5_REGION");
//
//      die;
      $config = array(
        'url' => 'https://sts.tencentcloudapi.com/',
        'domain' => 'sts.tencentcloudapi.com',
        'proxy' => '',
        'secretId' => env("COSV5_SECRET_ID"), // 固定密钥
        'secretKey' => env("COSV5_SECRET_KEY"), // 固定密钥
        'bucket' => env("OSS_IMG_BUCKET"), // 换成你的 bucket
        'region' => env("COSV5_REGION"), // 换成 bucket 所在园区
        'durationSeconds' => 3600, // 密钥有效期 注意注意注意重要的事情说三遍(文件过大一定要把时间设置长一点 最大为7200 较短上传的时候会出现403放翁权限的问题)
        // 允许操作(上传)的对象前缀,可以根据自己网站的用户登录态判断允许上传的目录,例子: 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:*'); // 这里修改允许跨域访问的网站
      header('Access-Control-Allow-Headers: origin,accept,content-type');
      echo json_encode($tempKeys);
    }

视图页面可以这样写

在这里插入代码片
<script src="https://unpkg.com/cos-js-sdk-v5/demo/common/cos-auth.min.js"></script>
<script>
        (function () {
            //监听表单选择文件
            $("#fileSelector").change(function(e) {
                $("#submitBtn").show();

                var e = e || window.event;
                //获取 文件 个数 取消的时候使用
                var files = e.target.files;
                if(files.length>0){
                    // 获取文件名 并显示文件名
                    var fileName = files[0].name;
                    $(".Js_address-input").text(fileName);
                }

            })
            // 请求用到的参数
            var Bucket = "{{env('OSS_IMG_BUCKET')}}";
            var Region = "{{env('COSV5_REGION')}}";
            var protocol = location.protocol === 'https:' ? 'https:' : 'http:';
            var prefix = protocol + '//' + Bucket + '.cos.' + Region + '.myqcloud.com/';

            // 对更多字符编码的 url encode 格式
            var camSafeUrlEncode = function (str) {
                return encodeURIComponent(str)
                    .replace(/!/g, '%21')
                    .replace(/'/g, '%27')
                    .replace(/\(/g, '%28')
                    .replace(/\)/g, '%29')
                    .replace(/\*/g, '%2A');
            };

            // 计算签名
            var getAuthorization = function (options, callback) {
                //var method = (options.Method || 'get').toLowerCase();
                //var key = options.Key || '';
                //var pathname = key.indexOf('/') === 0 ? key : '/' + key;

                var url = '/getUploadSign';
                var xhr = new XMLHttpRequest();
                // var data = {
                //     method: method,
                //     pathname: pathname,
                // };
                xhr.open('GET', url, true);
                //xhr.setRequestHeader('content-type', 'application/json');
                xhr.onload = function (e) {
                    var credentials;
                    try {
                        credentials = (new Function('return ' + xhr.responseText))().credentials;
                    } catch (e) {}
                    if (credentials) {
                        callback(null, {
                            XCosSecurityToken: credentials.sessionToken,
                            Authorization: CosAuth({
                                SecretId: credentials.tmpSecretId,
                                SecretKey: credentials.tmpSecretKey,
                                Method: options.Method,
                                Pathname: options.Pathname,
                            })
                        });
                    } else {
                        console.error(xhr.responseText);
                        callback('获取签名出错');
                    }
                };
                xhr.onerror = function (e) {
                    callback('获取签名出错');
                };
                xhr.send();
            };

            // 上传文件
            var uploadFile = function (file, callback) {
                if(file.size>10*1020*1024){
                    $("#ctlBtn").hide();
                    layer.msg('视频大小不得超过10M');return;
                }
                $("#submitBtn").hide();

                var Key = 'auctionvideo/'+"{{ $special->id }}/"+ file.name; // 这里指定上传目录和文件名; // 这里指定上传目录和文件名
                getAuthorization({Method: 'PUT', Pathname: '/'+ Key}, function (err, info) {

                    if (err) {
                        alert(err);
                        return;
                    }

                    var auth = info.Authorization;

                    var XCosSecurityToken = info.XCosSecurityToken;
                    var url = prefix + camSafeUrlEncode(Key).replace(/%2F/g, '/');

                    //var url = prefix + Key;
                    var xhr = new XMLHttpRequest();
                    xhr.open('PUT', url, true);
                    xhr.setRequestHeader('Authorization', auth);
                    XCosSecurityToken && xhr.setRequestHeader('x-cos-security-token', XCosSecurityToken);
                    xhr.upload.οnprοgress=progressFunction;
                    xhr.onload = function () {
                        if (/^2\d\d$/.test('' + xhr.status)) {
                            var ETag = xhr.getResponseHeader('etag');
                            callback(null, {url: url, ETag: ETag});
                        } else {
                            callback('文件 ' + Key + ' 上传失败,状态码:' + xhr.status);
                        }
                    };
                    xhr.onerror = function () {
                        callback('文件 ' + Key + ' 上传失败,请检查是否没配置 CORS 跨域规则');
                    };
                    xhr.send(file);
                });
            };

            // 监听表单提交
            document.getElementById('submitBtn').onclick = function (e) {
                var file = document.getElementById('fileSelector').files[0];
                if (!file) {
                    layer.msg('未选择上传文件',{icon:2,time:2000});
                    //document.getElementById('msg').innerText = '';
                    return;
                }
                file && uploadFile(file, function (err, data) {
                    $("#videopath").val(data.url);
                    layer.msg('上传成功',{icon:1,time:1000});
                });
            };
        })();
        function progressFunction(evt) {
            var progress=document.querySelector("progress");
            if (evt.lengthComputable) {//
                progress.value=(Math.round(evt.loaded / evt.total * 100));
            }
        }
    </script>
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值