图片上传
适用场景#
用于上传保存本地图片
基础能力说明#
绑定「图片、数组」字段#
- 单张图片上传：表单容器绑定数据模型后，模型中的「图片」字段会自动渲染为图片上传组件，实现对单张图片上传的支持
- 多张图片上传：表单容器绑定数据模型后，模型中元素类型为图片的「数组」字段会自动渲染为图片上传组件，实现对多张图片上传的支持
获取用户上传图片后的图片文件 ID#
通过图片上传组件上传图片后，会触发「文件上传」事件，通过该事件的出参 event.detail.value 获取上传图片的 cloudID，可通过打印日志的方式，查看到该 ID，示例如下
创建一个自定义方法，写入打印日志代码 console.log(event.detail.value) ，具体内容格式如下图所示：
页面中拖入「图片上传」组件，配置「上传成功」事件触发该打印日志方法
预览配置效果，会发现当选择图片进行上传后，会将上传图片的 cloudID 打印在控制台中（注意：组件的「上传单张图片属性关闭时，支持多图片上传，打印内容会是 array 类型的数据；该属性开启时，限制仅可上传一个图片，打印内容会是 string 类型数据）
上传单张图片属性关闭时打印结果
上传单张图片属性开启时打印结果
在日常使用中，您可以通过组件的上传成功事件，将该 ID 存入变量，或通过其他方式进行使用
注意事项#
caution
图片上传后，用户可通过该图片的 https 地址下载/查看图片。如需限制所有文件/图片资源仅当前上传用户可下载，请在微搭环境的云开发-云存储模块中调整存储桶访问权限为「仅创建者及管理员可读写」
属性介绍#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 绑定字段 | name | string | 基础属性 | "images" | 表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。图片上传后，所有人可通过图片http地址下载查看。如需限制所有文件/图片资源仅文件上传用户可下载，请在微搭环境的云开发-云存储模块中调整存储桶访问权限为「仅创建者及管理员可读写」 |
| 字段标题 | title | string | 基础属性 | "上传图片" | 组件标题位置的显示内容 |
| 显示标题 | labelVisible | boolean | 基础属性 | true | - |
| 必填 | required | boolean | 基础属性 | false | 启用后该组件强制必填，值不可为空 |
| 必填标识 | requiredFlag | boolean | 基础属性 | true | 启用后，组件若要求必填，则会显示必填星号标记 |
| 必填校验提示 | requiredMsg | string | 基础属性 | "该项为必填项" | 启用必填，但组件值为空时的提示信息 |
| 图片类型(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) | maxSize | number | 基础属性 | 10 | 单张图片的大小上限 |
| 上传单张图片 | single | boolean | 基础属性 | false | 在高级属性中开启小程序端获取微信头像后，仅能上传1张图片 |
| 图片数量上限 | maxUploadCount | number | 基础属性 | 9 | 允许上传的最大图片数量 |
| 初始值 | value | array | 基础属性 | - | - |
| 图片显示形状 | showShape | {"label":"直角矩形","value":"ectangle"}|{"label":"圆角矩形","value":"roundedTectangle"}|{"label":"圆形","value":"circular"} | 基础属性 | "ectangle" | 只影响图片的展示效果，不会对图片进行裁剪 |
| 布局方式 | layout | {"label":"自动","value":""}|{"label":"水平","value":"horizontal"}|{"label":"垂直","value":"vertical"} | 基础属性 | "" | 设置当前组件的标题和输入选择区域为左右布局或上下布局，如选择“自动”，则跟随父级表单容器的配置 |
| 禁用 | disabled | boolean | 基础属性 | false | - |
| 小程序端获取微信头像 | isChooseAvatar | boolean | 基础属性 | false | 开启后小程序用户可选择直接上传微信头像 |
事件介绍#
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 值改变 | change | 兼容三端 | - | |
| 上传成功 | success | 兼容三端 | - | |
| 上传失败 | error | 兼容三端 | - |