開發 | 手把手,教你為小程序添加「上傳圖片」功能
知曉程序註:
很多小程序都為用戶提供圖片上傳功能。這時候,使用一些「對象存儲」雲服務,也許是最快、最經濟的選擇。
那麼,小程序該如何使用這類服務呢?使用的時候,又應該注意哪些問題呢?
知曉程序(微信號 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 中的方法即可。
通過簽名流程我們可以知道,簽名需要 SecretId
和SecretKey
,這兩個信息不適合存放在客戶端中,這也是我們單獨部署一個鑒權伺服器的主要原因。
在之前的文章中,我介紹過,我在服務端使用 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_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
:賬號的appidBUCKET_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:愛范兒 |