uniapp+PHP,APP端使用腾讯云cos SDK上传文件

做了一个APP,其中有上传图片的功能,使用的是腾讯云的对象储存,需要前后端都做一些工作。

后端:

写一个接口,用来给前端提供秘钥之类的数据(此处使用的是PHP)
首先composer引入后端签名的SDK
注意:此处是引入签名的SDK,并非cos的SDK。是qcloud-sts-sdk,不是cos-sdk-v5,这一块官方文档隐藏的有点深,并没有很直观的告诉你
点这里去到官方的github,选择你使用的语言版本,根据文档引入就可以了

//composer.json加上
{
    "require":{
        "qcloud_sts/qcloud-sts-sdk": "3.0.*"
    }
}
//然后命令行update一下
composer update

我这边用的是ThinkPHP

 'https://sts.tencentcloudapi.com/',
            'domain' => 'sts.tencentcloudapi.com',
            'secretId' => $c['SecretId'],
            'secretKey' => $c['SecretKey'],
            'bucket' => $c['bucket'],
            'region' =>  $c['region'],
            'durationSeconds' => 7200, //过期时间 秒 最大7200
            'allowPrefix' => '*',
            // 全部权限
            'allowActions' => array(
                // 简单上传
                '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);
        $this->rList($tempKeys);// 此处是向前端返回数据,根据你的代码修改
    }
}

前端:

首先去到腾讯云sdk文档,选择你使用的语言。如果开发web就选js的sdk,如果开发小程序就选小程序的sdk(他俩最主要的区别在于是否使用blob上传)
腾讯云SDK文档
我们这次是使用uniapp做的APP端,虽然算是套壳APP,但是依然不能选js的SDK,需要选择小程序的SDK。

// npm安装一下
npm install cos-wx-sdk-v5

打开\node_modules\cos-wx-sdk-v5\src,将里面的session.js和util.js中的小程序api替换成uni的api(使用一键替换,搜索wx. 替换为uni.)
打开\node_modules\cos-wx-sdk-v5\lib,将里面的request.js也用同样的方法替换。
(为避免sdk版本变更引发的问题,可以在\node_modules\cos-wx-sdk-v5\文件夹下使用linux命令grep -rn 'wx.'来全局搜索一下其他使用小程序api的地方进行替换)

SDK使用:

// 选择图片方法
chooseImage(dataName) {
    let _this = this;
    uni.chooseImage({
        count: 1,
        sizeType: 'compressed',
        sourceType: ['album', 'camera'],
        success: function(e) {
            _this.upload(e.tempFilePaths[0],dataName);
        }
    })
},

// 上传方法
upload(url, dataName) {
    let Key= this.createUniqueId(1)[0];
    let _this = this;
    // 此处替换为你自己的网络请求方法
    this.Fun.ajaxDo("/Api/Upload/data", {}, function(res) {
        var COS = require('cos-wx-sdk-v5');
        var cos = new COS({
            SecretId: res.data.credentials.tmpSecretId,
            SecretKey: res.data.credentials.tmpSecretKey,
            XCosSecurityToken: res.data.credentials.sessionToken
        });
        _this.Fun.loading("正在上传");// 此处替换为你自己的加载提示方法
        cos.sliceUploadFile({
                Bucket: _this.Bucket, // 你的储存桶
                Region: _this.Region,// 你的储存区域
                Key: Key,
                FilePath: url
            },
            function(err, data) {
                _this.Fun.close();// 此处替换为你自己的关闭加载方法
                if (err == null) {
                    _this[dataName] = 'https://' + data.Location;
                } else {
                    _this.Fun.tip("上传失败");// 此处替换为你自己的提示方法
                }
            }
        )
    });
},
// 附带生成随机文件名的方法,也可以替换成你自己的
createUniqueId(n) {
    var random = function() { // 生成10-12位不等的字符串
        return Number(Math.random().toString().substr(2)).toString(36); // 转换成十六进制
    };
    var arr = [];

    function createId() {
        var num = random();
        var _bool = false;
        arr.forEach(v => {
            if (v === num) _bool = true;
        });
        if (_bool) {
            createId();
        } else {
            arr.push(num);
        }
    }
    var i = 0;
    while (i < n) {
        createId();
        i++;
    }
    return arr;
},

调用:




(腾讯云储存的后台也需要设置一些安全跨域之类的项,这些网上有很多教程说明,此处就不说了)

你可能感兴趣的:(uniapp+PHP,APP端使用腾讯云cos SDK上传文件)