做了一个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>
(腾讯云储存的后台也需要设置一些安全跨域之类的项，这些网上有很多教程说明，此处就不说了)
