微信小程序之图片文件上传

选择图片: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

上传图片： https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

小程序身份认证界面，点击上传地方的加号，选择相册或者拍照，进行上传，原图无压缩，最多上传3张（分别为身份z正面、反面和手持） 。

注：这边以laravel框架为例

1、定义文件上传路由：

2、在laravel框架中的config文件夹下的filesystems.php文件中配置上传路径

3、身份认证文件上传方法

1、在身份认证界面的wxml中绑定选择图片事件

2、在身份认证界面的js中定义上传图片的方法

3、上传成功后，将上传的文件地址存到数组中

微信小程序图片切换有两种方式：

两个image标签绑定同一个点击事件，根据data的值(true或false)在点击事件里面进行图片切换。

为了区分，里面图片路径用单引号，外面src用双引号。

发布朋友圈在社区类产品中是经常会用到的场景，今天就带大家一步步实现发布朋友圈功能。

效果展示

通过使用事件中心的查询和创建，同时使用文件上传组件上传本地图片，最终实现一个发布朋友圈功能。

创建数据表

注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表、商品表、订单表和自定义表。

点击数据中心。

创建数据表。

字段包含：内容（文本类型） 、图片（图片类型）。

创建事件

注意：事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。

点击事件中心。

创建获取图片事件。

创建上传图片事件。

添加一个成功的接口。

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中循环容器。

点击检查面板中的触发器。

创建获取图片触发器。

选中循环容器的列表条目。

点击检查面板中的数据绑定与设置。

绑定数据。

新增样式

注意：在检查器面板中的样式设置面板能够对每个组件设置两种样式状态，配置触发器的激活与非激活能够轻松在这两种样式状态中自由切换。

新建一个界面。

选中文件上传组件。

点击检查面板中的样式面板。

配置样式。

将样式更换为选中样式。

配置其样式。

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中文件上传组件。

点击检查面板中的触发器。

创建一个设置值的触发器，将文件上传的值传递给图片组件。

创建一个监听文件上传值改变的触发器。

创建一个初始化、非激活状态的触发器。

创建一个无触发时机的激活状态触发器。

创建一个监听文件上传值改变的触发器。

创建一个重置触发器。

选中输入框组件。

点击检查面板中的触发器。

创建一个重置触发器。

选中根容器。

点击检查面板中的触发器。

创建触发器。

选中按钮组件。

点击检查面板中的触发器。

创建一个界面跳转触发器。

创建上传图片触发器。

这样就可以实现发布朋友圈功能了。

---