騰訊雲對象存儲使用

快速使用

1.注冊騰訊雲

2.進入對象存儲-->存儲桶列表-->創建存儲桶

3.查看右上角sdk文檔，根據文檔走下來

1.安裝sdk
手動安裝：
直接拷貝js內容到項目目錄utils下命名cos-wx-sdk-v5.js
npm安裝：
npm install cos-wx-sdk-v5
2.小程序中引入
var COS = require('cos-wx-sdk-v5'); // 填寫具體絕對路徑
3.開始使用
線上產環境需微信公眾平台配置后台域名訪問白名單，選擇【開發】>【開發設置】>【服務器域名】，配置域名白名單。

4.創建一個 COS SDK 實例，COS SDK 支持以下幾種格式創建：

格式一（推薦）：后端通過獲取臨時密鑰給到前端，前端計算簽名。

var cos = new COS({
    // 必選參數
    getAuthorization: function (options, callback) {
        // 服務端 JS 和 PHP 示例：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
        // 服務端其他語言參考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
        // STS 詳細文檔指引看：https://cloud.tencent.com/document/product/436/14048
        wx.request({
            // url這里填寫你后端生成臨時密鑰的api地址
            url: 'https://example.com/server/sts.php',
            data: {
                // 可從 options 取需要的參數
            },
            success: function (result) {
                var data = result.data;
                var credentials = data && data.credentials;
                if (!data || !credentials) return 
                    console.error('credentials invalid');
                callback({
                    TmpSecretId: credentials.tmpSecretId,
                    TmpSecretKey: credentials.tmpSecretKey,
                    XCosSecurityToken: credentials.sessionToken,
                    // 建議返回服務器時間作為簽名的開始時間，避免用戶瀏覽器本地時間偏差過大導致簽名錯誤
                    StartTime: data.startTime, // 時間戳，單位秒，如：1580000000
                    ExpiredTime: data.expiredTime, // 時間戳，單位秒，如：1580000900
                });
            }
        });
    }
});

后端生成臨時密鑰:

接口寫好后，將生成密鑰的地址填到上面的url中即可

1.獲取SDK

pip install -U qcloud-python-sts

2.寫接口

import json
import os
from sts.sts import Sts
​
class CredentialView(APIView):
    def get(sef,request,*args,**kwargs):
        config = {
        # 臨時密鑰有效時長，單位是秒
        'duration_seconds': 1800,
        'secret_id': 固定secret_id,
        'secret_key': 固定密鑰,
        # 設置網絡代理
        # 'proxy': {
        #     'http': 'xx',
        #     'https': 'xx'
        # },
        # 換成你的 bucket(存儲桶)
        'bucket': 'example-1253653367',
        # 換成 bucket 所在地區
        'region': 'ap-guangzhou',
        # 這里改成允許的路徑前綴，可以根據自己網站的用戶登錄態判斷允許上傳的具體路徑
        # 例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全風險, 請謹慎評估使用)
        'allow_prefix': 'exampleobject', 
        # 密鑰的權限列表。簡單上傳和分片需要以下的權限，其他權限列表請看 https://cloud.tencent.com/document/product/436/31923
        'allow_actions': [
        # 簡單上傳
        'name/cos:PutObject',
        'name/cos:PostObject',
        # 分片上傳
        'name/cos:InitiateMultipartUpload',
        'name/cos:ListMultipartUploads',
        'name/cos:ListParts',
        'name/cos:UploadPart',
        'name/cos:CompleteMultipartUpload'
        ],
    }
​
    sts = Sts(config)
    response = sts.get_credential()
    return Response(response)

 

格式四：（不推薦）：前端使用固定密鑰計算簽名，該格式適用於前端調試，若使用此格式，請避免泄露密鑰

var cos = new COS({
     SecretId: 'xxxxx',
     SecretKey: 'xxxxx',
   });

 

完整代碼使用示例

小程序端：

這里使用格式1創建COS實例:

// 點擊上傳
  uploadImage() {
    // // 格式四：使用真實密鑰，適合測試；不推薦，避免泄露密鑰
    // var cos = new COS({
    //   SecretId: 'xxxxx',
    //   SecretKey: 'xxxxx',
    // });
    var cos = new COS({
      getAuthorization: function (options, callback) {
        wx.request({
          url: 'http://127.0.0.1:8000/api/credential',
          data: {
            // 可從options中取需要的參數
          },
          success: function (result) {
            var data = result.data;
            var credentials = data && data.credentials;
            callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              XCosSecurityToken: credentials.sessionToken,
              // 建議返回服務器時間作為簽名的開始時間，避免用戶瀏覽器本地時間偏差過大導致簽名錯誤
              StartTime: data.startTime, // 時間戳，單位秒，如：1580000000
              ExpiredTime: data.expiredTime, // 時間戳，單位秒，如：1580000900
            });
          }
        });
      }
    });
    for (var index in this.data.imageList) {
      var filePath = this.data.imageList[index]
      cos.postObject({
        Bucket: 'auction-1302698597',
        Region: 'ap-shenzhen-fsi',
        Key: curr_time + index + '.png',
        FilePath: filePath,
        // 上傳進度條
        onProgress: function (info) {
          console.log('上傳進度條：', JSON.stringify(info));
        }
      }, function (err, data) {
        // 上傳成功后執行
        // console.log('上傳之后返回的值:', data.Location); // Location 圖片對象地址(可直接訪問)，然后保存地址到數據庫即可
        wx.request({
          url: 'http://127.0.0.1:8000/api/photosView',
          method: 'POST',
          data: {
            img_url: data.Location
          },
          success(res) {
            // console.log(res.data)
            Notify({
              type: 'success',
              message: res.data.msg
            });
          }
        })
      });
    }
  },

 

后端生成臨時密鑰：

api地址：http://127.0.0.1:8000/api/photosView

from sts.sts import Sts
from django.conf import settings
​
class CredentialView(APIView):
    def get(self,request,*args,**kwargs):
        config = {
        # 臨時密鑰有效時長，單位是秒
        'duration_seconds': 1800,
        'secret_id': settings.SECRETID,
        'secret_key': settings.SECRETKEY,
        # 換成你的 bucket(存儲桶)
        'bucket': 'auction-1302698597',
        # 換成 bucket 所在地區
        'region': 'ap-shenzhen-fsi',
        # 這里改成允許的路徑前綴，可以根據自己網站的用戶登錄態判斷允許上傳的具體路徑
        # 例子： a.jpg 或者 a/* 或者 * (使用通配符*存在重大安全風險, 請謹慎評估使用)
        'allow_prefix': '*',
        # 密鑰的權限列表。簡單上傳和分片需要以下的權限，其他權限列表請看 https://cloud.tencent.com/document/product/436/31923
        'allow_actions': [
            # 簡單上傳
            'name/cos:PostObject',
        ],
        }
​
        sts = Sts(config)
        response = sts.get_credential()
        return Response(response)

 

刪除雲存儲對象 

removeImage(e) {
    // 判斷是否正在上傳，如果正在上傳就終止上傳，已傳成功則刪除線上圖片
    // 刪除圖片 終止 or 刪除
    var index = e.detail.index
    var item = this.data.imgList[index]
    if(item.percent == 100) {
      // 使用上面創建的cos對象
      cos.deleteObject({
        Bucket: 'auction-1302698597',
        Region: 'ap-shenzhen-fsi',
        Key: item.key,
      }, (err, data) => {
        if (err) {
          wx.showToast({
            title: '刪除失敗',
            icon: 'none'
          })
        } else {
          // 同時刪除頁面顯示
          let arr = this.data.imgList
          arr.splice(index, 1)
          this.setData({
            imgList: arr
          })
        }
      })
    }
  },

 

基本使用就是這樣，需要更詳細文檔請看官方：https://cloud.tencent.com/document/product/436/31953