小程序開發：上傳圖片到騰訊雲

時間 2019-11-16

標籤程序開發上傳圖片騰訊欄目騰訊简体版

原文原文鏈接

這是小程序開發第二篇，主要介紹如何上傳圖片到騰訊雲，之因此選擇騰訊雲，是由於騰訊雲免費空間大😂python

準備工做

上傳圖片主要是將圖片上傳到騰訊雲對象存儲（COS）。git

要使用對象存儲 API，須要先執行如下步驟：github

購買騰訊雲對象存儲（COS）服務
在騰訊雲對象存儲控制檯裏建立一個 Bucket
在控制檯我的 API 密鑰頁面裏獲取 AppID、SecretID、SecretKey 內容
編寫一個請求籤名算法程序（或使用任何一種服務端 SDK）
計算簽名，調用 API 執行操做

因此咱們要作的準備工做有：算法

進入騰訊雲官網，註冊賬號
登陸雲對象存儲服務（COS）控制檯，開通COS服務，建立資源須要上傳的Bucket
在小程序官網上配置域名信息（不然沒法在小程序中發起對該域名的請求）

這些配置過程這裏就不作說明了，接下來主要介紹步驟四、5。小程序

小程序上傳圖片到 cos 流程以下圖：微信小程序

在這個過程當中咱們須要實現的是，鑑權服務器返回簽名的步驟以及小程序的相關步驟。api

COS鑑權服務

使用對象存儲服務 COS 時，可經過 RESTful API 對 COS 發起 HTTP 匿名請求或 HTTP 簽名請求，對於簽名請求，COS 服務器端將會進行對請求發起者的身份驗證。bash

匿名請求：HTTP 請求不攜帶任何身份標識和鑑權信息，經過 RESTful API 進行 HTTP 請求操做。
簽名請求：HTTP 請求時添加簽名，COS服務器端收到消息後，進行身份驗證，驗證成功則可接受並執行請求，不然將會返回錯誤信息並丟棄此請求。
騰訊雲COS對象存儲，基於密鑰 HMAC (Hash Message Authentication Code) 的自定義 HTTP 方案進行身份驗證。

上傳圖片是一個簽名請求，須要進行簽名驗證。之因此咱們服務器

簽名流程

客戶經過對 HTTP 請求進行簽名，並將簽名後的請求發送至騰訊雲進行簽名驗證，具體流程以下圖所示。微信

咱們使用 sdk 開發，這個流程大體瞭解下就行，簽名的實現 sdk 已經包含，只須要調用方法便可。

經過簽名流程咱們能夠知道，簽名須要 SecretId 和 SecretKey，這兩個信息不適合存放在客戶端中，這也是咱們單獨部署一個鑑權服務器的主要緣由。

簽名生成 API

上一篇小程序開發：python sanic 實現小程序登陸註冊咱們介紹過，服務端使用 sanic 框架 + swagger_py_codegen 生成 rest-api。

添加簽名生成 api 咱們須要先在文檔中添加 API 的相關描述。文檔代碼：https://github.com/gusibi/Metis/blob/master/docs/v1.yml

/qc_cos/config:
 get:
 summary: 騰訊雲配置
 description: 騰訊雲配置
 tags: [Config]
 operationId: get_qc_cos_config
 parameters:
 - $ref: '#/parameters/AccessToken'
 - $ref: '#/parameters/qcos_path_in_query'
 responses:
                200:
 schema:
                        $ref: '#/definitions/QCOSConfig'
 default:
 description: Unexpected error
 schema:
                        $ref: '#/definitions/Error'
 security:
 - OAuth2: [open]複製代碼

這個接口咱們要求登陸才能調用。
文檔定義完成以後，調用
swagger_py_codegen -s  docs/v1.yml . -p apis -tlp sanic複製代碼
生成代碼模板，API 代碼實現以下：
```python
from qcloud_cos.cos_auth import Auth

async def get(self, request):
    auth = Auth(appid=Config.QCOS_APPID,
                secret_id=Config.QCOS_SECRET_ID,
                secret_key=Config.QCOS_SECRET_KEY)
    expired = time() + 3600 # 簽名有效時間 3600 秒
    # 上傳到 cos bucket 的目錄
    dir_name = request.raw_args.get('cos_path', '/xrzeti')
    # 生成簽名
    sign = auth.sign_more(Config.QCOS_BUCKET_NAME,
                          cos_path=dir_name,
                          expired=expired)
    return {"sign": sign}, 200複製代碼

> 因爲 騰訊雲COSv4 的Python SDK 只支持 python2，而 sanic 須要 python3.5+ 因此，這裏我 fork 出來一份添加了 python3 的支持。
[https://github.com/gusibi/cos-python-sdk-v4](https://github.com/gusibi/cos-python-sdk-v4)。使用 python3 環境的能夠使用這個版本。

## 上傳圖片到 cos

### 選擇圖片

> `wx.chooseImage(OBJECT)`
從本地相冊選擇圖片或使用相機拍照。

調用這個方法，小程序會把選擇的圖片放到臨時路徑（在小程序本次啓動期間能夠正常使用，如需持久保存，需在主動調用 wx.saveFile，在小程序下次啓動時才能訪問獲得），咱們只能將臨時路徑的文件上傳。

核心代碼以下：

```js
    uploadToCos: function () {
        var that = this;

        // 選擇上傳的圖片
        wx.chooseImage({
            sizeType: ['original', 'compressed'], // 圖片類型 original 原圖，compressed 壓縮圖，默認兩者都有
            success: function (res) {

                // 獲取文件路徑
                var file = res.tempFiles[0];
                console.log(file.size);

                // 獲取文件名
                var fileName = file.path.match(/(wxfile:\/\/)(.+)/)
                fileName = fileName[2]

                // 獲取到圖片臨時路徑後，指定文件名 上傳到cos
                upload(file.path, fileName, that);
            }
        })
    }複製代碼

這裏圖片選擇成功後，咱們取原圖上傳到 cos。

上傳圖片

cos 上傳圖片的URL由 cos_region，appid，bucket_name和 cos_dir_name 拼接而成。
把如下字段配置成本身的cos相關信息，詳情可看API文檔

cosUrl = "https://" + REGION + ".file.myqcloud.com/files/v2/" + APPID + "/" + BUCKET_NAME + DIR_NAME;複製代碼

REGION: cos上傳的地區
APPID: 帳號的appid
BUCKET_NAME: cos bucket的名字
DIR_NAME: 上傳的文件目錄

var config = require('../config.js');
// 先肯定上傳的 URL
var cosUrl = "https://" + config.cos_region + ".file.myqcloud.com/files/v2/" + config.cos_appid + "/" + config.cos_bucket_name + config.cos_dir_name;

//填寫本身的鑑權服務器地址
var cosSignatureUrl = config.host + '/v1/qc_cos/config?cos_path=' + config.cos_dir_name;

/** * 上傳方法 * filePath: 上傳的文件路徑 * fileName： 上傳到cos後的文件名 * that: 小程序所在當前頁面的 object */
function upload(filePath, fileName, that) {
    var data;

    // 鑑權獲取簽名
    wx.request({
        url: cosSignatureUrl,
        header: {
            Authorization: 'JWT' + ' ' + that.data.jwt.access_token
        },
        success: function (cosRes) {
            // 獲取簽名
            var signature = cosRes.data.sign;

            // 頭部帶上簽名，上傳文件至COS
            var uploadTask = wx.uploadFile({
                url: cosUrl + '/' + fileName,
                filePath: filePath,
                header: {
                    'Authorization': signature
                },
                name: 'filecontent',
                formData: {
                    op: 'upload'
                },
                success: function (uploadRes) {
                    // 上傳成功後的操做
                    var upload_res = JSON.parse(uploadRes.data)
                    var files = that.data.files;
                    files.push(upload_res.data.source_url);
                    that.setData({
                        upload_res: upload_res,
                        files: files,
                        test_image: upload_res.data.source_url
                    })
                },
                fail: function (e) {
                    console.log('e', e)
                }
            });
            // 上傳進度條
            uploadTask.onProgressUpdate((res) => {
                that.setData({
                    upload_progress: res.progress
                })
                if (res.progress === 100){
                    that.setData({
                        upload_progress: 0
                    })
                }
            })
        }
    })
    return data
}複製代碼