乐趣区

关于微信小程序:如何实现带有预览效果的图片上传

成果展现:

前置筹备:

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

增加文件上传组件

增加上传按钮

步骤合成:

创立上传图片数据表:

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

创立上传图片事件:

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

配置上传图片事件:

  • 数据操作 - 创立
  • 抉择数据表 - 图片表
  • 抉择数据名称 - 图片字段 - 关联组件
  • 接口类型 - 胜利

创立上传胜利提醒触发器:

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

创立上传图片触发器:

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

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

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

创立设置值触发器:

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

创立值扭转时监听触发器:

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

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

退出移动版