在上一篇中(zhōng)我們搞定了相冊的新建和(hé)列表功能，本節我們嘗試往相冊内傳圖功能，這需要小程序和(hé)服務器(qì)端的雙重支持。

還是老規矩，我們先實現服務器(qì)端。

服務器(qì)端

我們需要數據庫的支持，還記得第8篇說的那個(gè)photo數據表麼，在這裡我們進行一次修改然後再新增一個(gè)表。

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

相冊圖片表
實際存儲每個(gè)照片，包含圖片的路(lù)徑等，其中(zhōng)photo_id為photo表的主鍵ID。

現在有了數據表我們再做兩個(gè)控制器(qì)，分别用來服務于photo和(hé)photo_item表。

接下(xià)來我們來計劃一下(xià)添加相片的邏輯，看下(xià)圖。

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

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

因此我們對PhotoItemController的create方法進行了重寫，如(rú)下(xià)圖，這裡也為你(nǐ)展示了yii2中(zhōng)restful如(rú)何重寫内置的action。

然後我們自己定義一個(gè)create，看下(xià)圖。

通(tōng)過yii2的UploadedFile類來接收小程序過來的圖片并且保持，同時建立一條記錄。
其中(zhōng)的N8Folder::createItemPath主要用于生成有效的物理路(lù)徑，感興趣的可(kě)以在github倉庫上看看。

ok，接下(xià)來我們來處理小程序端

小程序

在小程序端分兩步

• 1、請求服務器(qì)POST /xcx/photos 新建一條photo記錄（所屬相冊、描述）

• 2、新建photo記錄成功，攜帶文(wén)件請求POST /xcx/photo-items 新建一條photo_item記錄（所屬相冊ID、photoID、圖片路(lù)徑、類型等）

正式開始

新建一條photo記錄

這個(gè)過程涉及到了一個(gè)小程序組件 -- picker，也就是滾動(dòng)選擇器(qì)，它能接收一個(gè)數組或對象數組，我們這裡使用它來選擇所屬相冊，先看效果。

當頁面準備好後我們去服務器(qì)拿到相冊列表，看代碼。

代碼實現了如(rú)何把對象數據渲染成選擇器(qì)。

接下(xià)來我們就可(kě)以提交數據新建photo了，這仍是一個(gè)表單事件formSubmit，當然為了體驗在用戶端并不會感覺到photo和(hé)photo_item新建之間的差别，隻需點擊一次按鈕。

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

關(guān)于photo記錄的建立并不複雜，我們之前學過新建相冊，思路(lù)都一樣，POST /xcx/photos 即可(kě)，要說的是上傳圖片，我們看下(xià)面的代碼

在上面的代碼中(zhōng)涉及到一個(gè)循環，因為我可(kě)能一次選擇多個(gè)圖片然後點擊提交，所以核心是這個(gè)uploadImage函數，我們來看一看它。

這涉及到wx.uploadFile函數，這是微信小程序内置的，用來上傳一個(gè)文(wén)件，有幾個(gè)點要說下(xià)

• 綠色框 要上傳文(wén)件資(zī)源的路(lù)徑，也就是我們相冊裡選擇的圖片路(lù)徑。

• 藍色框 文(wén)件對應的 key，在yii2上通(tōng)過這個(gè)名字獲得文(wén)件對象。

• 紅色框 有時候上傳文(wén)件的時候還需要一些其他數據，可(kě)以都放到formData内。

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