我們喜歡小程式的原因之一就是它提供了更多和手機系統互動的介面，比如今天要說的這個從相簿選擇 / 拍照功能。注：拍照功能在某些機型上還有閃退現象，希望微信官方可以儘快完善。

在上一篇中我們搞定了相簿的新建和列表功能，本節我們嘗試往相簿內傳圖功能，這需要小程式和伺服器端的雙重支援。

還是老規矩，我們先實現伺服器端。

伺服器端

我們需要資料庫的支援，還記得第8篇說的那個photo資料表麼，在這裡我們進行一次修改然後再新增一個表。

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

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

現在有了資料表我們再做兩個控制器，分別用來服務於photo和photo_item表。

接下來我們來計劃一下新增相片的邏輯，看下圖。

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

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

因此我們對PhotoItemController的create方法進行了重寫，如下圖，這裡也為你展示了yii2中restful如何重寫內建的action。

然後我們自己定義一個create，看下圖。

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

ok，接下來我們來處理小程式端

小程式

在小程式端分兩步

• 1、請求伺服器POST /xcx/photos 新建一條photo記錄（所屬相簿、描述）
• 2、新建photo記錄成功，攜帶檔案請求POST /xcx/photo-items 新建一條photo_item記錄（所屬相簿ID、photoID、圖片路徑、型別等）

正式開始

新建一條photo記錄

這個過程涉及到了一個小程式元件 -- picker，也就是滾動選擇器，它能接收一個陣列或物件陣列，我們這裡使用它來選擇所屬相簿，先看效果。

當頁面準備好後我們去伺服器拿到相簿列表，看程式碼。

程式碼實現瞭如何把物件資料渲染成選擇器。

接下來我們就可以提交資料新建photo了，這仍是一個表單事件formSubmit，當然為了體驗在使用者端並不會感覺到photo和photo_item新建之間的差別，只需點選一次按鈕。

因此在提交表單時候我們需要對是否選擇了相簿以及是否傳圖進行判斷。

關於photo記錄的建立並不複雜，我們之前學過新建相簿，思路都一樣，POST /xcx/photos 即可，要說的是上傳圖片，我們看下面的程式碼

在上面的程式碼中涉及到一個迴圈，因為我可能一次選擇多個圖片然後點選提交，所以核心是這個uploadImage函式，我們來看一看它。

這涉及到wx.uploadFile函式，這是微信小程式內建的，用來上傳一個檔案，有幾個點要說下

• 綠色框 要上傳檔案資源的路徑，也就是我們相簿裡選擇的圖片路徑。
• 藍色框 檔案對應的 key，在yii2上通過這個名字獲得檔案物件。
• 紅色框 有時候上傳檔案的時候還需要一些其他資料，可以都放到formData內。

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

演示下

上面對大家講解了主要函式和思路，全部程式碼大家可以在github上拉程式碼下來看，另外準備了一個演示視訊，可以看下 點選檢視演示