當前位置:
首頁 > 科技 > 開發 | 手把手,教你為小程序添加「上傳圖片」功能

開發 | 手把手,教你為小程序添加「上傳圖片」功能

開發 | 手把手,教你為小程序添加「上傳圖片」功能

知曉程序註:

很多小程序都為用戶提供圖片上傳功能。這時候,使用一些「對象存儲」雲服務,也許是最快、最經濟的選擇。

那麼,小程序該如何使用這類服務呢?使用的時候,又應該注意哪些問題呢?

知曉程序(微信號 zxcx0101)今天分享的這篇文章,會以騰訊雲的對象存儲服務為例,教大家將小程序接入對象存儲服務。

文 | goodspeed

準備工作

上傳圖片,主要是將圖片上傳到騰訊雲對象存儲(COS)。

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

  • 購買騰訊雲對象存儲(COS)服務。
  • 在騰訊雲 對象存儲控制台 里創建一個 Bucket。
  • 在控制台「個人 API 密鑰」頁面里,獲取 AppID、SecretID、SecretKey 等內容
  • 編寫一個請求籤名演算法程序(或使用任何一種服務端 SDK)
  • 計算簽名,調用 API 執行操作

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

  • 進入騰訊雲官網(www.qcloud.com),註冊帳號。
  • 登錄雲對象存儲服務(COS)控制台,開通 COS 服務,創建資源需要上傳的 Bucket。
  • 在公眾平台小程序後台中,配置相關域名信息(否則無法在小程序中發起對該域名的請求)。

開發 | 手把手,教你為小程序添加「上傳圖片」功能

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

小程序上傳圖片到 COS 的流程圖,如下:

開發 | 手把手,教你為小程序添加「上傳圖片」功能

在這個過程中我們需要實現的是,鑒權伺服器返回簽名的步驟,以及小程序處理圖片的相關步驟。

COS 鑒權服務

使用對象存儲服務 COS 時,可通過 RESTful API,對 COS 發起 HTTP 匿名請求或簽名請求。

對於簽名請求,COS 伺服器端將會進行對請求發起者的身份驗證。

  • 匿名請求:

    HTTP 請求不攜帶任何身份標識和鑒權信息

    ,通過 RESTful API 進行 HTTP 請求操作。
  • 簽名請求:HTTP 請求時添加簽名,

    COS伺服器端收到消息後,進行身份驗證,驗證成功則可接受並執行請求

    ,否則將會返回錯誤信息並丟棄此請求。

騰訊雲 COS 對象存儲,基於密鑰 HMAC(Hash Message Authentication Code)的自定義 HTTP 方案,進行身份驗證。

在此例中,上傳圖片是一個簽名請求,需要進行簽名驗證。

1. 簽名流程

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

開發 | 手把手,教你為小程序添加「上傳圖片」功能

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

通過簽名流程我們可以知道,簽名需要 SecretIdSecretKey這兩個信息不適合存放在客戶端中,這也是我們單獨部署一個鑒權伺服器的主要原因。

2. 生成簽名的介面

在之前的文章中,我介紹過,我在服務端使用 sanic框架和swagger_py_codegen生成 Rest API。

為了完成簽名生成 API,我們需要先在文檔中添加 API 的相關描述。

/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
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

由於騰訊雲 COS v4 的 Python SDK 只支持 Python 2,而 sanic 需要 Python 3.5+,所以,這裡我 fork 出來一份添加了 Python 3 的支持,使用 Python 3 的開發者,可以使用它。

關注「知曉程序」微信公眾號,回復「源碼」,獲取該框架下載地址。

在小程序上傳圖片1. 選擇圖片

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。

2. 上傳圖片

COS 上傳圖片的 URL,由 cos_regionappidbucket_namecos_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來獲取圖片的上傳進度,所以在這裡,我將圖片的上傳進度顯示了出來。

最後,感謝女朋友支持。

原文地址:https://juejin.im/post/59a23fff518825244d204d9e

關注「知曉程序」公眾號 ??

  • 在微信後台回復「

    開發

    」,獲取知曉程序開發全套經驗。
  • 在微信後台回復「

    666

    」,獲取小程序開發 demo。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 愛范兒 的精彩文章:

超60款中文遊戲登陸Switch!任天堂表態,今年就能玩到
首款搭載YunOS版鎚子系統手機曝光:康佳S5!開屏濃濃的鎚子味兒
有人說 Surface 差不多該像 WP 一樣壽終正寢,但微軟認為是無稽之談
中國聯通放了蘋果鴿子 Apple Watch 3「不在服務區」

TAG:愛范兒 |