這是小程序開發(fā)第二篇，主要介紹如何上傳圖片到騰訊云，之所以選擇騰訊云，是因?yàn)轵v訊云免費(fèi)空間大?

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

要使用對象存儲(chǔ) API，需要先執(zhí)行以下步驟：

購買騰訊云對象存儲(chǔ)（COS）服務(wù)

在騰訊云 對象存儲(chǔ)控制臺(tái) 里創(chuàng)建一個(gè) Bucket

在控制臺(tái) 個(gè)人 API 密鑰 頁面里獲取 AppID、SecretID、SecretKey 內(nèi)容

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

計(jì)算簽名，調(diào)用 API 執(zhí)行操作

所以我們要做的準(zhǔn)備工作有：

進(jìn)入騰訊云官網(wǎng)，注冊帳號(hào)

登錄云對象存儲(chǔ)服務(wù)（COS）控制臺(tái)，開通COS服務(wù)，創(chuàng)建資源需要上傳的Bucket

在小程序官網(wǎng)上配置域名信息（否則無法在小程序中發(fā)起對該域名的請求）

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

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

在這個(gè)過程中我們需要實(shí)現(xiàn)的是，鑒權(quán)服務(wù)器返回簽名的步驟以及小程序的相關(guān)步驟。

使用對象存儲(chǔ)服務(wù) COS 時(shí)，可通過 RESTful API 對 COS 發(fā)起 HTTP 匿名請求或 HTTP 簽名請求，對于簽名請求，COS 服務(wù)器端將會(huì)進(jìn)行對請求發(fā)起者的身份驗(yàn)證。

匿名請求：HTTP 請求不攜帶任何身份標(biāo)識(shí)和鑒權(quán)信息，通過 RESTful API 進(jìn)行 HTTP 請求操作。

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

上傳圖片是一個(gè)簽名請求，需要進(jìn)行簽名驗(yàn)證。之所以我們

客戶通過對 HTTP 請求進(jìn)行簽名，并將簽名后的請求發(fā)送至騰訊云進(jìn)行簽名驗(yàn)證，具體流程如下圖所示。

我們使用 sdk 開發(fā)，這個(gè)流程大致了解下就行，簽名的實(shí)現(xiàn) sdk 已經(jīng)包含，只需要調(diào)用方法即可。

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

上一篇[小程序開發(fā)：python sanic 實(shí)現(xiàn)小程序登錄注冊]() 我們介紹過，服務(wù)端使用 sanic 框架 + swagger_py_codegen 生成 rest-api。

添加簽名生成 api 我們需要先在文檔中添加 API 的相關(guān)描述。文檔代碼：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]

這個(gè)接口我們要求登錄才能調(diào)用。

文檔定義完成之后，調(diào)用

swagger_py_codegen -s  docs/v1.yml . -p apis -tlp sanic

生成代碼模板，API 代碼實(shí)現(xiàn)如下：

    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 # 簽名有效時(shí)間 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 環(huán)境的可以使用這個(gè)版本。

wx.chooseImage(OBJECT)

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

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

核心代碼如下：

    uploadToCos: function () {
        var that = this;

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

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

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

                // 獲取到圖片臨時(shí)路徑后，指定文件名 上傳到cos
                upload(file.path, fileName, that);
            }
        })
    }
    

這里圖片選擇成功后，我們?nèi)≡瓐D上傳到 cos。

cos 上傳圖片的URL由 cos_region，appid，bucket_name和 cos_dir_name 拼接而成。
把以下字段配置成自己的cos相關(guān)信息，詳情可看API文檔

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

REGION: cos上傳的地區(qū)
APPID: 賬號(hào)的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;

//填寫自己的鑒權(quán)服務(wù)器地址
var cosSignatureUrl = config.host + "/v1/qc_cos/config?cos_path=" + config.cos_dir_name;

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

    // 鑒權(quán)獲取簽名
    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)
                }
            });
            // 上傳進(jìn)度條
            uploadTask.onProgressUpdate((res) => {
                that.setData({
                    upload_progress: res.progress
                })
                if (res.progress === 100){
                    that.setData({
                        upload_progress: 0
                    })
                }
            })
        }
    })
    return data
}

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

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

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

最后，感謝女朋友支持。