如何实现带有预览效果的图片上传?

效果展示:

如何实现带有预览效果的图片上传?_第1张图片

前置准备:

添加用于展示预览图的图片组件(下文简称“预览图组件”)

添加文件上传组件

添加上传按钮

步骤分解:

创建上传图片数据表:

  • 点击数据中心图标,进入数据中心
  • 点击创建数据表按钮
  • 添加类型为图片的字段(下文简称“图片字段”)
  • 创建上传图片 数据表(下文简称“图片表”)

如何实现带有预览效果的图片上传?_第2张图片

如何实现带有预览效果的图片上传?_第3张图片

如何实现带有预览效果的图片上传?_第4张图片

创建上传图片事件:

  • 点击事件中心图标,进入事件中心
  • 点击创建事件按钮,创建自定义事件

如何实现带有预览效果的图片上传?_第5张图片

如何实现带有预览效果的图片上传?_第6张图片

配置上传图片事件:

  • 数据操作-创建
  • 选择数据表-图片表
  • 选择数据名称-图片字段-关联组件
  • 接口类型-成功

如何实现带有预览效果的图片上传?_第7张图片

创建上传成功提示触发器:

  • 选中上传按钮
  • 点击展开检查器面板
  • 点击展开 触发器面板
  • 点击点击 ➕ 号按钮创建触发器
  • 配置触发器

如何实现带有预览效果的图片上传?_第8张图片

创建上传图片触发器:

  • 选中上传按钮
  • 点击展开 检查器面板
  • 点击展开触发器面板
  • 点击点击 ➕ 号按钮创建触发器
  • 配置触发器

如何实现带有预览效果的图片上传?_第9张图片

预览图组件开启允许被设置动态数据:

  • 选中预览图组件
  • 点击展开检查器面板
  • 点击展开数据绑定及设置面板
  • 开启允许被设置动态数据开关

如何实现带有预览效果的图片上传?_第10张图片

创建设置值触发器:

  • 选中文件上传组件
  • 点击展开检查器面板
  • 点击展开触发器面板
  • 点击点击 ➕ 号按钮创建触发器
  • 配置触发器

如何实现带有预览效果的图片上传?_第11张图片

创建值改变时监听触发器:

  • 选中文件上传组件
  • 点击展开检查器面板
  • 点击展开触发器面板
  • 点击点击 ➕ 号按钮创建触发器
  • 配置触发器

如何实现带有预览效果的图片上传?_第12张图片

这样就可以实现带有预览效果的图片上传了。
官网链接:https://www.towify.com/#/

你可能感兴趣的:(微信小程序无代码开发平台)