做了一個APP谤专，其中有上傳圖片的功能，使用的是騰訊云的對象儲存午绳，需要前后端都做一些工作置侍。
后端：
寫一個接口，用來給前端提供秘鑰之類的數(shù)據(jù)（此處使用的是PHP）
首先composer引入后端簽名的SDK
注意：此處是引入簽名的SDK箱叁，并非cos的SDK墅垮。是qcloud-sts-sdk，不是cos-sdk-v5耕漱，這一塊官方文檔隱藏的有點深算色，并沒有很直觀的告訴你
點這里去到官方的github，選擇你使用的語言版本螟够，根據(jù)文檔引入就可以了
//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文件灾梦，此處根據(jù)你的代碼修改
$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' => '*',
// 全部權(quán)限
'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);// 此處是向前端返回數(shù)據(jù)妓笙，根據(jù)你的代碼修改
}
}
前端：
首先去到騰訊云sdk文檔若河，選擇你使用的語言。如果開發(fā)web就選js的sdk寞宫，如果開發(fā)小程序就選小程序的sdk（他倆最主要的區(qū)別在于是否使用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版本變更引發(fā)的問題篷就，可以在\node_modules\cos-wx-sdk-v5\文件夾下使用linux命令grep -rn 'wx.'來全局搜索一下其他使用小程序api的地方進(jìn)行替換）
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;
// 此處替換為你自己的網(wǎng)絡(luò)請求方法
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,// 你的儲存區(qū)域
Key: Key,
FilePath: url
},
function(err, data) {
_this.Fun.close();// 此處替換為你自己的關(guān)閉加載方法
if (err == null) {
_this[dataName] = 'https://' + data.Location;
} else {
_this.Fun.tip("上傳失敗");// 此處替換為你自己的提示方法
}
}
)
});
},
// 附帶生成隨機(jī)文件名的方法射亏，也可以替換成你自己的
createUniqueId(n) {
var random = function() { // 生成10-12位不等的字符串
return Number(Math.random().toString().substr(2)).toString(36); // 轉(zhuǎn)換成十六進(jìn)制
};
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;
},
調(diào)用：
<template>
<view>
<!--點擊選擇圖片上傳后 this.image 就自動變成你上傳的圖片的外鏈-->
<view @tap="chooseImage('image')"></view>
</view>
</template>
<script>
export default {
data() {
return {
image: '',
}
},
methods: {
// 上面的方法
// ......
}
}
</script>
(騰訊云儲存的后臺也需要設(shè)置一些安全跨域之類的項，這些網(wǎng)上有很多教程說明竭业，此處就不說了)
