微信小程序[第十一篇] -- 添加照片（小程序圖片上傳功能）

咱們喜歡小程序的緣由之一就是它提供了更多和手機系統交互的接口，好比今天要說的這個從相冊選擇 / 拍照功能。注：拍照功能在某些機型上還有閃退現象，但願微信官方能夠儘快完善。

在上一篇中咱們搞定了相冊的新建和列表功能，本節咱們嘗試往相冊內傳圖功能，這須要小程序和服務器端的雙重支持。

仍是老規矩，咱們先實現服務器端。

服務器端

咱們須要數據庫的支持，還記得第8篇說的那個photo數據表麼，在這裏咱們進行一次修改而後再新增一個表。

相冊表
存儲每次照片的提交以及對本次提交的備註。

alt

相冊圖片表
實際存儲每一個照片，包含圖片的路徑等，其中photo_id爲photo表的主鍵ID。

alt

如今有了數據表咱們再作兩個控制器，分別用來服務於photo和photo_item表。

alt

接下來咱們來計劃一下添加相片的邏輯，看下圖。

alt

當點擊了「提交」按鈕後，會新家一條photo記錄而後返回給小程序，小程序開始實際的傳圖過程並攜帶新photo記錄的id來填充photo_item表。

這裏有一點要注意的，就是針對於photo記錄的新建直接使用yii2的restful --- create 就能夠了，可是對於傳圖不同，涉及到接收圖片、存儲等等等等。

所以咱們對PhotoItemController的create方法進行了重寫，以下圖，這裏也爲你展現了yii2中restful如何重寫內置的action。

alt

而後咱們本身定義一個create，看下圖。

alt

經過yii2的UploadedFile類來接收小程序過來的圖片而且保持，同時創建一條記錄。
其中的N8Folder::createItemPath主要用於生成有效的物理路徑，感興趣的能夠在github倉庫上看看。

ok，接下來咱們來處理小程序端

小程序

在小程序端分兩步

• 一、請求服務器POST /xcx/photos 新建一條photo記錄（所屬相冊、描述）
• 二、新建photo記錄成功，攜帶文件請求POST /xcx/photo-items 新建一條photo_item記錄（所屬相冊ID、photoID、圖片路徑、類型等）

正式開始

新建一條photo記錄

這個過程涉及到了一個小程序組件 -- picker，也就是滾動選擇器，它能接收一個數組或對象數組，咱們這裏使用它來選擇所屬相冊，先看效果。

alt

當頁面準備好後咱們去服務器拿到相冊列表，看代碼。

alt

代碼實現瞭如何把對象數據渲染成選擇器。

接下來咱們就能夠提交數據新建photo了，這還是一個表單事件formSubmit，固然爲了體驗在用戶端並不會感受到photo和photo_item新建之間的差異，只需點擊一次按鈕。

所以在提交表單時候咱們須要對是否選擇了相冊以及是否傳圖進行判斷。

alt

關於photo記錄的創建並不複雜，咱們以前學過新建相冊，思路都同樣，POST /xcx/photos 便可，要說的是上傳圖片，咱們看下面的代碼

alt

在上面的代碼中涉及到一個循環，由於我可能一次選擇多個圖片而後點擊提交，因此核心是這個uploadImage函數，咱們來看一看它。

alt

這涉及到wx.uploadFile函數，這是微信小程序內置的，用來上傳一個文件，有幾個點要說下

• 綠色框 要上傳文件資源的路徑，也就是咱們相冊裏選擇的圖片路徑。
• 藍色框 文件對應的 key，在yii2上經過這個名字得到文件對象。
• 紅色框 有時候上傳文件的時候還須要一些其餘數據，能夠都放到formData內。

這樣就完成了上傳圖片功能。

演示下

上面對你們講解了主要函數和思路，所有代碼你們能夠在github上拉代碼下來看，另外準備了一個演示視頻，能夠看下 點擊查看演示