在(zài)上(shàng)一篇中我們搞定了(le／liǎo)相冊的(de)新建和(hé / huò)列表功能，本節我們嘗試往相冊内傳圖功能，這(zhè)需要(yào / yāo)小程序和(hé / huò)服務器端的(de)雙重支持。

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

服務器端

我們需要(yào / yāo)數據庫的(de)支持，還記得第8篇說(shuō)的(de)那個(gè)photo數據表麽，在(zài)這(zhè)裏我們進行一次修改然後再新增一個(gè)表。

相冊表
存儲每次照片的(de)提交以(yǐ)及對本次提交的(de)備注。

相冊圖片表
實際存儲每個(gè)照片，包含圖片的(de)路徑等，其中photo_id爲(wéi / wèi)photo表的(de)主鍵ID。

現在(zài)有了(le／liǎo)數據表我們再做兩個(gè)控制器，分别用來(lái)服務于(yú)photo和(hé / huò)photo_item表。

接下來(lái)我們來(lái)計劃一下添加相片的(de)邏輯，看下圖。

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

這(zhè)裏有一點要(yào / yāo)注意的(de)，就(jiù)是(shì)針對于(yú)photo記錄的(de)新建直接使用yii2的(de)restful --- create 就(jiù)可以(yǐ)了(le／liǎo)，但是(shì)對于(yú)傳圖不(bù)一樣，涉及到(dào)接收圖片、存儲等等等等。

因此我們對PhotoItemController的(de)create方法進行了(le／liǎo)重寫，如下圖，這(zhè)裏也(yě)爲(wéi / wèi)你展示了(le／liǎo)yii2中restful如何重寫内置的(de)action。

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

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

ok，接下來(lái)我們來(lái)處理小程序端

小程序

在(zài)小程序端分兩步

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

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

正式開始

新建一條photo記錄

這(zhè)個(gè)過程涉及到(dào)了(le／liǎo)一個(gè)小程序組件 -- picker，也(yě)就(jiù)是(shì)滾動選擇器，它能接收一個(gè)數組或對象數組，我們這(zhè)裏使用它來(lái)選擇所屬相冊，先看效果。

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

代碼實現了(le／liǎo)如何把對象數據渲染成選擇器。

接下來(lái)我們就(jiù)可以(yǐ)提交數據新建photo了(le／liǎo)，這(zhè)仍是(shì)一個(gè)表單事件formSubmit，當然爲(wéi / wèi)了(le／liǎo)體驗在(zài)用戶端并不(bù)會感覺到(dào)photo和(hé / huò)photo_item新建之(zhī)間的(de)差别，隻需點擊一次按鈕。

因此在(zài)提交表單時(shí)候我們需要(yào / yāo)對是(shì)否選擇了(le／liǎo)相冊以(yǐ)及是(shì)否傳圖進行判斷。

關于(yú)photo記錄的(de)建立并不(bù)複雜，我們之(zhī)前學過新建相冊，思路都一樣，POST /xcx/photos 即可，要(yào / yāo)說(shuō)的(de)是(shì)上(shàng)傳圖片，我們看下面的(de)代碼

在(zài)上(shàng)面的(de)代碼中涉及到(dào)一個(gè)循環，因爲(wéi / wèi)我可能一次選擇多個(gè)圖片然後點擊提交，所以(yǐ)核心是(shì)這(zhè)個(gè)uploadImage函數，我們來(lái)看一看它。

這(zhè)涉及到(dào)wx.uploadFile函數，這(zhè)是(shì)微信小程序内置的(de)，用來(lái)上(shàng)傳一個(gè)文件，有幾個(gè)點要(yào / yāo)說(shuō)下

• 綠色框 要(yào / yāo)上(shàng)傳文件資源的(de)路徑，也(yě)就(jiù)是(shì)我們相冊裏選擇的(de)圖片路徑。

• 藍色框 文件對應的(de) key，在(zài)yii2上(shàng)通過這(zhè)個(gè)名字獲得文件對象。

• 紅色框 有時(shí)候上(shàng)傳文件的(de)時(shí)候還需要(yào / yāo)一些其他(tā)數據，可以(yǐ)都放到(dào)formData内。

這(zhè)樣就(jiù)完成了(le／liǎo)上(shàng)傳圖片功能。