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

<?php
namespace app\api\controller;
use \QCloud\COSSTS\Sts;

class Upload
{
    public function data()
    {
        $sts = new Sts();
        $c = config("TencentCloud");// 这里是我的config文件,此处根据你的代码修改
        $config = array(
            'url' => '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;
},

调用:

<template>
    <view>
        <!--点击选择图片上传后 this.image 就自动变成你上传的图片的外链-->
        <view @tap="chooseImage('image')"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                image: '',
            }
        },
        methods: {
            // 上面的方法
            // ......
        }
    }
</script>

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容