图片选择器
在 Web 端,Zio 提供了更加灵活的图片选择器,你可以通过配置来设置上传图片的最大数量,可以是一张也可以是多张
应用场景
上传证件、商品图片、发布文章图片内容等需要上传一张或多张图片的场景
图片选择器设计
在图片选择器的设计中可以做如下配置: 最大图片数量: 指需要通过图片选择器选择多少张图片上传,默认为1张
纵列数量: 当最大图片数量大于1时,可以设置纵列数量,即上传的图片按照纵列数量来显示
图片间距: 指的是上传多张图片时,图片与图片之间行与列的间隔
占位图片: 指的是上传图片的图标样式,未上传则显示默认样式
默认值: 指的是上传图片之前,在图片选择器中显示的内容,可以是单张也可以是多张
图片选择器数据
当利用图片选择器选择了单张或多张图片之后,需要利用修改表数据行为将选择的结果添加到数据库
选择并上传单张图片
上传单张图片时,确保在数据模型中已经创建好了商品图片表,并且有类型为图片的字段,你可以在图片选择器组件的交互的成功时行为下配置修改表数据行为上传,也可以在其他组件例如按钮上配置修改表数据行为绑定图片选择器选择的结果进行上传
选择并上传多上图片
上传多张图片时,确保在数据模型中已经创建好了商品图片表,并且有类型为图片的字段,你可以在图片选择器组件的交互的成功时行为下配置修改表数据行为上传,也可以在其他组件例如按钮上配置修改表数据行为绑定图片选择器选择的结果进行上传
与上传单张图片不同的是,上传多张图片时,需要打开修改表数据行为中的【批量修改】模式,在其数据源中绑定图片选择器选择的结果,然后需要上传的具体的图片字段不需要绑定具体内容,而是点击字段名称旁的“...”按钮,选择「切换」即可
图片选择器行为
图片选择器中仅有「成功时行为」,即配置上传图片成功的时候期待执行的操作