商城系統(tǒng) 注冊(cè)

小程序開(kāi)發(fā)上傳圖片如何實(shí)現(xiàn)

2018-02-28|HiShop
導(dǎo)讀: 很多小程序都為用戶提供圖片上傳功能。這時(shí)候,使用一些「對(duì)象存儲(chǔ)」云服務(wù),也許是最快、最經(jīng)濟(jì)的選擇。那么,小程序該如何使用這類(lèi)服務(wù)呢?使用的時(shí)候,又應(yīng)該注意哪些問(wèn)題...

 

  很多小程序都為用戶提供圖片上傳功能。這時(shí)候,使用一些「對(duì)象存儲(chǔ)」云服務(wù),也許是最快、最經(jīng)濟(jì)的選擇。那么,小程序該如何使用這類(lèi)服務(wù)呢?使用的時(shí)候,又應(yīng)該注意哪些問(wèn)題呢?

  小功能程序今天分享的這篇文章,會(huì)以騰訊云的對(duì)象存儲(chǔ)服務(wù)為例,教大家將小程序接入對(duì)象存儲(chǔ)服務(wù)。

小程序開(kāi)發(fā)上傳圖片如何實(shí)現(xiàn)


  準(zhǔn)備工作

  上傳圖片,主要是將圖片上傳到騰訊云對(duì)象存儲(chǔ)(COS)。要使用對(duì)象存儲(chǔ) API,需要先執(zhí)行以下步驟:

  購(gòu)買(mǎi)騰訊云對(duì)象存儲(chǔ)(COS)服務(wù)。

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

  在控制臺(tái)「?jìng)€(gè)人 API 密鑰」頁(yè)面里,獲取 AppID、SecretID、SecretKey 等內(nèi)容。

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

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

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

  進(jìn)入騰訊云官網(wǎng)(www.qcloud.com),注冊(cè)帳號(hào)。

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

  在公眾平臺(tái)小程序后臺(tái)中,配置相關(guān)域名信息(否則無(wú)法在小程序中發(fā)起對(duì)該域名的請(qǐng)求)。

小程序開(kāi)發(fā)上傳圖片如何實(shí)現(xiàn)

  這些配置過(guò)程這里就不做說(shuō)明了,接下來(lái)主要介紹步驟 4 和 5。小程序上傳圖片到 COS 的流程圖,如下:在這個(gè)過(guò)程中我們需要實(shí)現(xiàn)的是,鑒權(quán)服務(wù)器返回簽名的步驟,以及小程序處理圖片的相關(guān)步驟。COS 鑒權(quán)服務(wù)使用對(duì)象存儲(chǔ)服務(wù) COS 時(shí),可通過(guò) RESTful API,對(duì) COS 發(fā)起 HTTP 匿名請(qǐng)求或簽名請(qǐng)求。對(duì)于簽名請(qǐng)求,COS 服務(wù)器端將會(huì)進(jìn)行對(duì)請(qǐng)求發(fā)起者的身份驗(yàn)證。

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

  簽名請(qǐng)求:HTTP 請(qǐng)求時(shí)添加簽名,COS服務(wù)器端收到消息后,進(jìn)行身份驗(yàn)證,驗(yàn)證成功則可接受并執(zhí)行請(qǐng)求,否則將會(huì)返回錯(cuò)誤信息并丟棄此請(qǐng)求。

  騰訊云 COS 對(duì)象存儲(chǔ),基于密鑰 HMAC(Hash Message Authentication Code)的自定義 HTTP 方案,進(jìn)行身份驗(yàn)證。在此例中,上傳圖片是一個(gè)簽名請(qǐng)求,需要進(jìn)行簽名驗(yàn)證。

  1. 簽名流程客戶通過(guò)對(duì) HTTP 請(qǐng)求進(jìn)行簽名,并將簽名后的請(qǐng)求發(fā)送至騰訊云進(jìn)行簽名驗(yàn)證,具體流程如下圖所示:我們使用 SDK 開(kāi)發(fā),只需要大致了解這個(gè)流程就行。在 SDK 中已包含簽名的實(shí)現(xiàn),我們只需要調(diào)用 SDK 中的方法即可。通過(guò)簽名流程我們可以知道,簽名需要 SECRTID和 secretkey,這兩個(gè)信息不適合存放在客戶端中,這也是我們單獨(dú)部署一個(gè)鑒權(quán)服務(wù)器的主要原因。

  2. 生成簽名的接口在之前的文章中,我介紹過(guò),我在服務(wù)端使用 sanic 框架和 swagger_py_codegen生成 Rest API。為了完成簽名生成 API,我們需要先在文檔中添加 API 的相關(guān)描述。這個(gè)接口我們要求登錄才能調(diào)用。

  文檔定義完成之后,調(diào)用 swagger_py_codegen>s docs/v1.ym1 . p apis -tlp sanic生成代碼模板。API 代碼實(shí)現(xiàn)如下:由于騰訊云 COS v4 的 Python SDK 只支持 Python 2,而 sanic 需要 Python 3.5+,所以,這里我 fork 出來(lái)一份添加了 Python 3 的支持,使用 Python 3 的開(kāi)發(fā)者,可以使用它。

  上傳的文件目錄

小程序開(kāi)發(fā)上傳圖片如何實(shí)現(xiàn)

  在此來(lái)獲取圖片的上傳進(jìn)度,所以在這里,我將圖片的上傳進(jìn)度顯示了出來(lái)。
 

HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。

更多小程序開(kāi)發(fā)案例,盡在:http://descansotropical.com/xiaocx/kaifa.html

電話咨詢 預(yù)約演示 0元開(kāi)店