資訊專欄INFORMATION COLUMN
摘要：注拍照功能在某些機(jī)型上還有閃退現(xiàn)象，希望微信官方可以盡快完善。這涉及到函數(shù)，這是微信小程序內(nèi)置的，用來上傳一個(gè)文件，有幾個(gè)點(diǎn)要說下綠色框要上傳文件資源的路徑，也就是我們相冊(cè)里選擇的圖片路徑。
我們喜歡小程序的原因之一就是它提供了更多和手機(jī)系統(tǒng)交互的接口，比如今天要說的這個(gè)從相冊(cè)選擇 / 拍照功能。注：拍照功能在某些機(jī)型上還有閃退現(xiàn)象，希望微信官方可以盡快完善。
在上一篇中我們搞定了相冊(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)。
這樣就完成了上傳圖片功能。
演示下上面對(duì)大家講解了主要函數(shù)和思路，全部代碼大家可以在github上拉代碼下來看，另外準(zhǔn)備了一個(gè)演示視頻，可以看下 點(diǎn)擊查看演示
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/26058.html
摘要：本文作者來自授權(quán)地址已解決在里設(shè)置了圖片路徑在里正常無誤但是在手機(jī)上是沒有顯示的解決辦法這段話位置放那么偏問題描述代碼截圖模擬器里的效果手機(jī)里的效果未解決用小程序自帶的底部導(dǎo)航組件的話沒法實(shí)現(xiàn)跟微信原生底部小紅點(diǎn)或者消息提醒的功能已解決使用 本文作者：dongtao 來自：授權(quán)地址 1.已解決在app.wxss里設(shè)置了圖片路徑,在IDE里正常無誤,但是在手機(jī)上是沒有顯示的,解決辦法...
摘要：本文作者來自授權(quán)地址已解決在里設(shè)置了圖片路徑在里正常無誤但是在手機(jī)上是沒有顯示的解決辦法這段話位置放那么偏問題描述代碼截圖模擬器里的效果手機(jī)里的效果未解決用小程序自帶的底部導(dǎo)航組件的話沒法實(shí)現(xiàn)跟微信原生底部小紅點(diǎn)或者消息提醒的功能已解決使用 本文作者：dongtao 來自：授權(quán)地址 1.已解決在app.wxss里設(shè)置了圖片路徑,在IDE里正常無誤,但是在手機(jī)上是沒有顯示的,解決辦法...
摘要：，至此咱們的微信小程序的簡(jiǎn)單使用及了解算是分享完了，畢竟個(gè)人也是道行有限，沒有鉆研太深，這些只是本人在實(shí)際項(xiàng)目開發(fā)過程中用到和總結(jié)的經(jīng)驗(yàn)，有太多不足或不對(duì)的地方，希望大家多多給予指出與改正，咱們一起來共同學(xué)習(xí)與進(jìn)步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因?yàn)樗膫涫軞g迎度以及越來越被企業(yè)所重視，也就形成了咱們開...
摘要：，至此咱們的微信小程序的簡(jiǎn)單使用及了解算是分享完了，畢竟個(gè)人也是道行有限，沒有鉆研太深，這些只是本人在實(shí)際項(xiàng)目開發(fā)過程中用到和總結(jié)的經(jīng)驗(yàn)，有太多不足或不對(duì)的地方，希望大家多多給予指出與改正，咱們一起來共同學(xué)習(xí)與進(jìn)步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因?yàn)樗膫涫軞g迎度以及越來越被企業(yè)所重視，也就形成了咱們開...
閱讀 2613·2021-09-23 11:21
閱讀 1898·2021-09-22 15:15
閱讀 987·2021-09-10 11:27
閱讀 3454·2019-08-30 15:54
閱讀 669·2019-08-30 15:52
閱讀 1348·2019-08-30 15:44
閱讀 2360·2019-08-29 15:06
閱讀 2988·2019-08-28 18:21
