微信小程序制作图片上传功用

本文测验考试往相册内传图功用，这需求小程序和服务器真个两重支持。 服务器端咱们需求数据库的支持，还记得第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类来接管小程序过来的图片而且连结，同时成立一条记载。在小程序端分两步：

一、要求服务器POST /xcx/photos 新建一条photo记载（所属相册、形容）

二、新建photo记载胜利，携带文件要求POST /xcx/photo-items 新建一条photo_item记载（所属相册ID、photoID、图片途径、类型等） 正式起头 新建一条photo记载 这个过程波及到了一个小程序组件 -- picker，也就是滚动选择器，它能接管一个数组或对象数组，咱们这里运用它来选择所属相册，先当作效。

当页面筹备好后咱们去服务器拿到相册列表，看代码。
代码实现了怎样把对象数据衬着成选择器。 接下来咱们就能够提交数据新建photo了，这还是一个表单事宜formSubmit，当然为了体验在用户端其实不会觉得到photo和photo_item新建之间的不同，只需点击一次按钮。 因而在提交表单时辰咱们需求对是否选择了相册以及是否传图进行判断。
关于photo记载的成立其实不庞大，咱们以前学过新建相册，思绪都同样，POST /xcx/photos 便可，要说的是上传图片，咱们看下面的代码
在上面的代码中波及到一个轮回，由于我能够一次选择多个图片而后点击提交，以是核心是这个uploadImage函数，咱们来看一看它。
这波及到wx.uploadFile函数，这是微信小程序内置的，用来上传一个文件，有多少点要说下 ：

一、绿色框：要上传文件资本的途径，也就是咱们相册里选择的图片途径。 蓝色框文件对应的 key，在yii2上经由过程这个名字得到文件对象。
二、红色框：有时辰上传文件的时辰还需求一些其余数据，可以都放到formData内。 如许就完成为了上传图片功用。