這是小程序開發第二篇，主要介紹如何上傳圖片到騰訊云，之所以選擇騰訊云，是因為騰訊云免費空間大?

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

要使用對象存儲 API，需要先執行以下步驟：

購買騰訊云對象存儲（COS）服務

在騰訊云 對象存儲控制臺 里創建一個 Bucket

在控制臺 個人 API 密鑰 頁面里獲取 AppID、SecretID、SecretKey 內容

編寫一個請求簽名算法程序（或使用任何一種服務端 SDK）

計算簽名，調用 API 執行操作

所以我們要做的準備工作有：

進入騰訊云官網，注冊帳號

登錄云對象存儲服務（COS）控制臺，開通COS服務，創建資源需要上傳的Bucket

在小程序官網上配置域名信息（否則無法在小程序中發起對該域名的請求）

這些配置過程這里就不做說明了，接下來主要介紹步驟4、5。

小程序上傳圖片到 cos 流程如下圖：

在這個過程中我們需要實現的是，鑒權服務器返回簽名的步驟以及小程序的相關步驟。

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

匿名請求：HTTP 請求不攜帶任何身份標識和鑒權信息，通過 RESTful API 進行 HTTP 請求操作。

簽名請求：HTTP 請求時添加簽名，COS服務器端收到消息后，進行身份驗證，驗證成功則可接受并執行請求，否則將會返回錯誤信息并丟棄此請求。
騰訊云COS對象存儲，基于密鑰 HMAC (Hash Message Authentication Code) 的自定義 HTTP 方案進行身份驗證。

上傳圖片是一個簽名請求，需要進行簽名驗證。之所以我們

客戶通過對 HTTP 請求進行簽名，并將簽名后的請求發送至騰訊云進行簽名驗證，具體流程如下圖所示。

我們使用 sdk 開發，這個流程大致了解下就行，簽名的實現 sdk 已經包含，只需要調用方法即可。

通過簽名流程我們可以知道，簽名需要 SecretId 和 SecretKey，這兩個信息不適合存放在客戶端中，這也是我們多帶帶部署一個鑒權服務器的主要原因。

上一篇[小程序開發：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 代碼實現如下：

    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。使用 python3 環境的可以使用這個版本。

wx.chooseImage(OBJECT)

從本地相冊選擇圖片或使用相機拍照。

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

核心代碼如下：

    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
}

小程序提供了 uploadTask.onProgressUpdate() 來獲取圖片的上傳進度，這里我將圖片的上傳進度顯示了出來。

完整代碼參考：metis-wxapp: https://github.com/gusibi/Metis-wxapp

WeCOS-UGC-DEMO——微信小程序用戶資源上傳COS示例

最后，感謝女朋友支持。