本文尝试往相册内传图作用,这需要小程序和服务器端双向适用。
服务器端
大家需要数据信息库的适用,还记得第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类来接受小程序过来的照片而且维持,同时创建一条纪录。
小程序
在小程序端分两步
1、恳求服务器POST /xcx/photos 新建一条photo纪录(隶属相册、叙述)
2、新建photo纪录取得成功,携带文档恳求POST /xcx/photo-items 新建一条photo_item纪录(隶属相册ID、photoID、照片相对路径、种类等)
宣布刚开始
新建一条photo纪录
这个全过程涉及到到了一个小程序组件 picker,也就是翻转挑选器,它能接受一个数字能量数组或目标数字能量数组,大家这里应用它来挑选隶属相册,先看实际效果。
当网页页面提前准备好后大家去服务器拿到相册目录,看编码。
编码完成了怎样把目标数据信息3D渲染成挑选器。
接下来大家便可以递交数据信息新建photo了,这还是一个表单恶性事件formSubmit,自然以便体验在客户端其实不会觉得到photo和photo_item新建之间的区别,只需点一下一次按钮。
因而在递交表单情况下大家需要对是不是挑选了相册和是不是传图开展分辨。
有关photo纪录的创建其实不繁杂,大家之前学过新建相册,思路都一样,POST /xcx/photos 便可,要说的是提交照片,大家看下面的编码
在上面的编码中涉及到到一个循环系统,由于我将会一次挑选多个照片随后点一下递交,因此关键是这个uploadImage涵数,大家来看一看它。
这涉及到到wx.uploadFile涵数,这是手机微信小程序内嵌的,用来提交一个文档,有几个点要说下
翠绿色框 要提交文档資源的相对路径,也就是大家相册里挑选的照片相对路径。
蓝色框 文档对应的 key,在yii2上根据这个姓名得到文档目标。
鲜红色框 有情况下提交文档的情况下还需要一些别的数据信息,能够都放到formData内。
这样就进行了提交照片作用。
有关资讯: 手机微信小程序 手机微信小程序开发设计实例教程
---------