跳到主要内容

图片上传

适用场景#

用于上传保存本地图片

基础能力说明#

绑定「图片、数组」字段#

  1. 单张图片上传:表单容器绑定数据模型后,模型中的「图片」字段会自动渲染为图片上传组件,实现对单张图片上传的支持
  2. 多张图片上传:表单容器绑定数据模型后,模型中元素类型为图片的「数组」字段会自动渲染为图片上传组件,实现对多张图片上传的支持

获取用户上传图片后的图片文件 ID#

通过图片上传组件上传图片后,会触发「文件上传」事件,通过该事件的出参 event.detail.value 获取上传图片的 cloudID,可通过打印日志的方式,查看到该 ID,示例如下

  1. 创建一个自定义方法,写入打印日志代码 console.log(event.detail.value) ,具体内容格式如下图所示:

  2. 页面中拖入「图片上传」组件,配置「上传成功」事件触发该打印日志方法

  3. 预览配置效果,会发现当选择图片进行上传后,会将上传图片的 cloudID 打印在控制台中(注意:组件的「上传单张图片属性关闭时,支持多图片上传,打印内容会是 array 类型的数据;该属性开启时,限制仅可上传一个图片,打印内容会是 string 类型数据)

    1. 上传单张图片属性关闭时打印结果

    2. 上传单张图片属性开启时打印结果

  4. 在日常使用中,您可以通过组件的上传成功事件,将该 ID 存入变量,或通过其他方式进行使用

注意事项#

caution

图片上传后,用户可通过该图片的 https 地址下载/查看图片。如需限制所有文件/图片资源仅当前上传用户可下载,请在微搭环境的云开发-云存储模块中调整存储桶访问权限为「仅创建者及管理员可读写」

属性介绍#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
绑定字段namestring基础属性"images"表单字段的Key值,用于提交数据时,匹配数据模型字段标识。页面内需保证唯一。图片上传后,所有人可通过图片http地址下载查看。如需限制所有文件/图片资源仅文件上传用户可下载,请在微搭环境的云开发-云存储模块中调整存储桶访问权限为「仅创建者及管理员可读写」
字段标题titlestring基础属性"上传图片"组件标题位置的显示内容
显示标题labelVisibleboolean基础属性true-
必填requiredboolean基础属性false启用后该组件强制必填,值不可为空
必填标识requiredFlagboolean基础属性true启用后,组件若要求必填,则会显示必填星号标记
必填校验提示requiredMsgstring基础属性"该项为必填项"启用必填,但组件值为空时的提示信息
图片类型(WEB端)acceptTypes{"label":"全部","value":"image/*"}|{"label":"JPG/JPEG","value":"image/jpeg"}|{"label":"PNG","value":"image/png"}|{"label":"BMP","value":"image/bmp"}|{"label":"GIF","value":"image/gif"}|{"label":"TIF","value":"image/tif"}|{"label":"TIFF","value":"image/tiff"}基础属性["image/*"]支持上传的图片类型格式
单张大小(M)maxSizenumber基础属性10单张图片的大小上限
上传单张图片singleboolean基础属性false在高级属性中开启小程序端获取微信头像后,仅能上传1张图片
图片数量上限maxUploadCountnumber基础属性9允许上传的最大图片数量
初始值valuearray基础属性--
图片显示形状showShape{"label":"直角矩形","value":"ectangle"}|{"label":"圆角矩形","value":"roundedTectangle"}|{"label":"圆形","value":"circular"}基础属性"ectangle"只影响图片的展示效果,不会对图片进行裁剪
布局方式layout{"label":"自动","value":""}|{"label":"水平","value":"horizontal"}|{"label":"垂直","value":"vertical"}基础属性""设置当前组件的标题和输入选择区域为左右布局或上下布局,如选择“自动”,则跟随父级表单容器的配置
禁用disabledboolean基础属性false-
小程序端获取微信头像isChooseAvatarboolean基础属性false开启后小程序用户可选择直接上传微信头像

事件介绍#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
值改变change兼容三端-
上传成功success兼容三端-
上传失败error兼容三端-