如何使用Towify在微信小程序里实现多图上传显示？

效果展示

使用组件面板中的画廊布局，能够支持显示多张图片，同时结合文件上传组件，将文件中的图片，上传并显示到界面。

触发器配置

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

选中文件上传组件

点击检查面板中的触发器

创建设置值触发器

自身值即选择文件上传组件的显示值

替换值选择画廊布局

创建一个触发时机是在……时的触发器

这样就可以在小程序里实现多图上传显示了。

在实际开发中，很多时候都需要要上传图片，但是对于上传多张时需要一张张的上传，因为图片都可能比较大，这时就需要我们对上传图片的API进行进一步的处理，这样就解决了我们同时选择上传多张图片需求。所以为了方便以后使用，封装成一个特定的组件分享出来，也许很多能用到，也可能用不到，但是修改一下还是差不多一样可以用的。

多张图片上传的原理其实就是用递归的方法，在每一张上传完之后再继续上传下一张，直到完成为止。

新建一个uploadImages组件文件，定义组件的样式结构及js文件。

1.页面样式布局

view

css

图片插件这样大概就完成了，不过不是每一个人都是和我一样的情况，使用请具体项目分析。

实例请查看地址： https://github.com/kingbuwu/uploadImages

果动小程序上传手机相册如下：

首先我们通过wx.chooseImage来获取相册里的图片

再获取照片成功后，我们用当前时间戳命名图片，然后使用 wx.cloud.uploadFile方法来实现图片的上传

在上传成功后，会有如下回调。下图中的filenId就是我们在云存储中的路径，可以直接用这个路径来获取图片并显示的。

---