摘要：注拍照功能在某些机型上还有闪退现象，希望微信官方可以尽快完善。这涉及到函数，这是微信小程序内置的，用来上传一个文件，有几个点要说下绿色框要上传文件资源的路径，也就是我们相册里选择的图片路径。
我们喜欢小程序的原因之一就是它提供了更多和手机系统交互的接口，比如今天要说的这个从相册选择 / 拍照功能。注：拍照功能在某些机型上还有闪退现象，希望微信官方可以尽快完善。
在上一篇中我们搞定了相册的新建和列表功能，本节我们尝试往相册内传图功能，这需要小程序和服务器端的双重支持。
还是老规矩，我们先实现服务器端。
服务器端我们需要数据库的支持，还记得第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类来接收小程序过来的图片并且保持，同时建立一条记录。
其中的N8Folder::createItemPath主要用于生成有效的物理路径，感兴趣的可以在github仓库上看看。
ok，接下来我们来处理小程序端
小程序在小程序端分两步
1、请求服务器POST /xcx/photos 新建一条photo记录（所属相册、描述）
2、新建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内。
这样就完成了上传图片功能。
演示下上面对大家讲解了主要函数和思路，全部代码大家可以在github上拉代码下来看，另外准备了一个演示视频，可以看下 点击查看演示
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/26058.html
摘要：本文作者来自授权地址已解决在里设置了图片路径在里正常无误但是在手机上是没有显示的解决办法这段话位置放那么偏问题描述代码截图模拟器里的效果手机里的效果未解决用小程序自带的底部导航组件的话没法实现跟微信原生底部小红点或者消息提醒的功能已解决使用 本文作者：dongtao 来自：授权地址 1.已解决在app.wxss里设置了图片路径,在IDE里正常无误,但是在手机上是没有显示的,解决办法...
摘要：本文作者来自授权地址已解决在里设置了图片路径在里正常无误但是在手机上是没有显示的解决办法这段话位置放那么偏问题描述代码截图模拟器里的效果手机里的效果未解决用小程序自带的底部导航组件的话没法实现跟微信原生底部小红点或者消息提醒的功能已解决使用 本文作者：dongtao 来自：授权地址 1.已解决在app.wxss里设置了图片路径,在IDE里正常无误,但是在手机上是没有显示的,解决办法...
摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...
摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...
阅读 2441·2021-09-23 11:21
阅读 1851·2021-09-22 15:15
阅读 933·2021-09-10 11:27
阅读 3406·2019-08-30 15:54
阅读 619·2019-08-30 15:52
阅读 1301·2019-08-30 15:44
阅读 2315·2019-08-29 15:06
阅读 2934·2019-08-28 18:21
