我们喜欢小程序的原因之一是它提供了更多与手机系统交互的接口，比如我们今天要说的是从相册中选择/拍照功能。注：相机功能在部分机型上依然闪退，希望微信官方尽快完善。在上一篇文章中，我们解决了创建新相册并列出的功能。在本节中，我们尝试将图片传输到相册。这就需要小程序和服务端的双重支持。还是老规矩，我们先实现服务端。在服务器端，我们需要数据库的支持。还记得第八章提到的照片数据表吗？这里我们进行修改，然后添加一个新表。相册表存储每次提交的照片和对这次提交的评论。相册图片表实际存放的是每张照片，包括图片的路径等，其中photo_id是照片表的主键ID。现在我们有了数据表，我们将再制作两个控制器来分别为photo和photo_item表提供服务。接下来我们来规划一下添加照片的逻辑，如下图所示。当点击“提交”按钮时，会创建一条新的照片记录，然后返回给小程序。小程序开始实际的图像传输过程，并用新照片记录的ID填充photo_item表。这里要注意一点，照片记录的创建可以直接使用yii2的restful---create，但是图片传输就不一样了，涉及接收图片、存储图片等。于是我们重写了PhotoItemController的create方法，如下图，这里也给大家展示一下yii2中restful是如何重写内置action的。然后我们自己定义一个create，见下图。使用yii2的UploadedFile类接收小程序传来的图片并保存，同时创建一条记录。其中，N8Folder::createItemPath主要用于生成有效的物理路径。有兴趣的可以看看github仓库。ok，接下来我们来处理小程序端。小程序在小程序端分为两步。1.请求服务器POST/xcx/photos创建新的照片记录（相册，描述）2.创建新的照片记录成功，请求POST/文件xcx/photo-items创建新的photo_item记录（相册ID、photoID、图像路径、类型等）正式开始创建照片记录。这个过程涉及到一个小程序组件——picker，它是一个滚动的选择器，可以接收一个Array或者object数组，我们这里用它来选择它所属的相册，先看看效果吧。页面准备好后，我们去服务器端获取专辑列表，看代码。该代码实现了如何将对象数据呈现到选择器中。接下来，我们可以提交数据来创建一张新照片。这仍然是一个表单事件formSubmit。当然，为了让用户感受不到photo和photo_item创建的区别，只需要点击一次按钮即可。所以我们在提交表单的时候需要判断是否选择了相册，是否发送图片。照片记录的建立并不复杂。我们之前学过制作新专辑，思路是一样的。POST/xcx/photos就足够了。我们要说的是上传图片。让我们看看下面的代码涉及到上面代码中的一个循环。因为我可能一次选择多张图片然后点击提交，所以核心就是uploadImage函数，我们来看一下。这里涉及到wx.uploadFile函数，该函数是微信小程序内置的，用于上传文件。绿框里有几点要提一下上传文件资源的路径，也就是我们相册中选择的图片的路径。蓝色方框是文件对应的key，在yii2上通过这个名字获取文件对象。红框有时候上传文件的时候还需要一些其他的数据，可以放到formData里面。这样就完成了上传图片的功能。主要功能和思路在demo下给大家讲解。你可以拉取github上的代码查看所有代码。此外，我们还准备了演示视频，您可以观看。点击查看演示
