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

效果展示

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

触发器配置

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

选中文件上传组件

点击检查面板中森迹的触发器

创建设置值触发器

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

替换值选择画廊布局

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

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

上传图片在项目中属于一个常见场景。在小程序中同样遇到了这样的需求。如何去解决呢？

利用wx.chooseImage()，wx.uploadFile()两个接口即可完成小程序的批量上传图闷好正片。

wx.chooseImage()

主要参数：

count：控制选择图片张数至多9张；

sizeType： 选择图片尺寸（压缩：compressed or 原图：original）；

sourceType： 图片来源（相册：album or 拍照：camera）

wx.uploadFile()

主要参数：

url： 图片上传接口；

filePath： 上传资源路径（string）

name: 文件对应的 key,(与后台接口约定袜祥的key)

util.js

index.js

[图片上传失败...(image-353ab7-1553483695861)]

[图片上传失败...(image-a789e3-1553483695861)]

a, 批量封装函数中对上传文蚂悔件大小的监控

b, 加上uploadTask可以实现上传进度的监控

...

---