在上一篇中我們搞定了相冊(cè)的新建和列表功能，本節(jié)我們嘗試往相冊(cè)內(nèi)傳圖功能，這需要小程序和服務(wù)器端的雙重支持。

還是老規(guī)矩，我們先實(shí)現(xiàn)服務(wù)器端。

服務(wù)器端

我們需要數(shù)據(jù)庫的支持，還記得第8篇說的那個(gè)photo數(shù)據(jù)表么，在這里我們進(jìn)行一次修改然后再新增一個(gè)表。

相冊(cè)表
存儲(chǔ)每次照片的提交以及對(duì)本次提交的備注。

相冊(cè)圖片表
實(shí)際存儲(chǔ)每個(gè)照片，包含圖片的路徑等，其中photo_id為photo表的主鍵ID。

現(xiàn)在有了數(shù)據(jù)表我們?cè)僮鰞蓚€(gè)控制器，分別用來服務(wù)于photo和photo_item表。

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

當(dāng)點(diǎn)擊了“提交”按鈕后，會(huì)新家一條photo記錄然后返回給小程序，小程序開始實(shí)際的傳圖過程并攜帶新photo記錄的id來填充photo_item表。

這里有一點(diǎn)要注意的，就是針對(duì)于photo記錄的新建直接使用yii2的restful --- create 就可以了，但是對(duì)于傳圖不一樣，涉及到接收?qǐng)D片、存儲(chǔ)等等等等。

因此我們對(duì)PhotoItemController的create方法進(jìn)行了重寫，如下圖，這里也為你展示了yii2中restful如何重寫內(nèi)置的action。

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

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

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

小程序

在小程序端分兩步

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

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

正式開始

新建一條photo記錄

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

當(dāng)頁面準(zhǔn)備好后我們?nèi)シ?wù)器拿到相冊(cè)列表，看代碼。

代碼實(shí)現(xiàn)了如何把對(duì)象數(shù)據(jù)渲染成選擇器。

接下來我們就可以提交數(shù)據(jù)新建photo了，這仍是一個(gè)表單事件formSubmit，當(dāng)然為了體驗(yàn)在用戶端并不會(huì)感覺到photo和photo_item新建之間的差別，只需點(diǎn)擊一次按鈕。

因此在提交表單時(shí)候我們需要對(duì)是否選擇了相冊(cè)以及是否傳圖進(jìn)行判斷。

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

在上面的代碼中涉及到一個(gè)循環(huán)，因?yàn)槲铱赡芤淮芜x擇多個(gè)圖片然后點(diǎn)擊提交，所以核心是這個(gè)uploadImage函數(shù)，我們來看一看它。

這涉及到wx.uploadFile函數(shù)，這是微信小程序內(nèi)置的，用來上傳一個(gè)文件，有幾個(gè)點(diǎn)要說下

• 綠色框 要上傳文件資源的路徑，也就是我們相冊(cè)里選擇的圖片路徑。

• 藍(lán)色框 文件對(duì)應(yīng)的 key，在yii2上通過這個(gè)名字獲得文件對(duì)象。

• 紅色框 有時(shí)候上傳文件的時(shí)候還需要一些其他數(shù)據(jù)，可以都放到formData內(nèi)。

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