图片上传

1. 组件概述

图片上传是一个数据输入组件，专门用于上传图片文件。它支持图片预览、裁剪、尺寸限制、体积限制等功能，用户可以通过点击选择或拖拽的方式上传图片。该组件适用于需要收集图片的场景，如头像设置、作品展示、素材上传等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

场景一：AI 绘画应用的参考图上传。用户上传一张参考图片，点击”生成”按钮后调用工作流，AI 根据参考图生成新的艺术作品。可以开启”可裁剪”功能，让用户选择图片中最想保留的区域。
场景二：作业批改应用的题目图片上传。学生拍照上传数学题目图片，系统识别题目内容并给出解答思路。可以设置图片类型限制为常见图片格式，并设置最大体积限制，确保上传的图片清晰且不会过大。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
绑定变量	组件的变量名，用于存储上传图片的值。其他组件可以绑定此变量来显示图片，调用工作流时此变量的值会传递给工作流。
标题	表单项左侧显示的标签文字，用于说明该上传项的用途，如”头像”、“参考图”。
图片类型	限制可上传的图片格式。填写图片的后缀名，多个类型用逗号隔开，如”.jpeg, .jpg, .png, .gif”。默认支持常见图片格式。
占位图片地址	在未上传图片时显示的默认占位图。可以填写一个图片地址，作为上传区域的背景提示图。
上传方式	选择图片的上传方式。可选”文件接收器”（使用自定义接口上传）或”对象存储”（使用平台默认存储服务）。一般选择”对象存储”即可。
文件接收器	当上传方式选择”文件接收器”时显示。用于配置自定义的文件上传接口地址。
存储仓库	当上传方式选择”对象存储”时显示。选择图片存储的仓库，默认使用”平台默认”。
可多选	开启后允许一次上传多张图片。注意：开启多选后不能同时使用裁剪功能。开启后会显示”最大数量”配置项，用于限制最多可上传的图片数量（最多5张）。
可裁剪	开启后，用户选择图片后会进入裁剪模式，可以对图片进行裁剪。注意：开启裁剪后不能同时使用多选功能。开启后会显示以下裁剪相关配置项。
裁剪比率	设置裁剪框的宽高比例。例如填写”1”表示1:1正方形裁剪，填写”1.5”表示3:2比例裁剪。留空则不限制比例，用户可自由调整裁剪框。
裁剪时可旋转	开启后，用户在裁剪时可以旋转图片，方便调整图片角度。
裁剪时可缩放	开启后，用户在裁剪时可以缩放图片，方便调整图片大小。
裁剪区域	设置裁剪框的活动范围。“无限制”表示裁剪框可以超出图片边界；“绘图区域”表示裁剪框只能在图片范围内移动。建议选择”绘图区域”。
压缩质量	裁剪后图片的压缩质量，数值范围0.1到1。数值越小压缩率越高、文件越小，但图片质量也会下降。默认值0.7是一个较好的平衡点。
自动上传	开启后，用户选择图片后会自动开始上传，无需手动点击上传按钮。建议开启，提升用户体验。
最大体积	限制单张图片的最大文件大小，单位为KB。超过此大小的图片将无法上传。默认最大10MB（10240KB）。
图片限制	开启后可以对图片的尺寸进行限制。开启后会显示以下尺寸限制相关配置项。
宽度	要求图片必须是指定的宽度（像素）。如果图片宽度不符合要求，将无法上传。
高度	要求图片必须是指定的高度（像素）。如果图片高度不符合要求，将无法上传。
最大宽度	限制图片的最大宽度（像素）。超过此宽度的图片将无法上传。
最大高度	限制图片的最大高度（像素）。超过此高度的图片将无法上传。
最小宽度	限制图片的最小宽度（像素）。小于此宽度的图片将无法上传。
最小高度	限制图片的最小高度（像素）。小于此高度的图片将无法上传。
宽高比率	限制图片的宽高比例。例如填写”1.5”表示要求图片宽度是高度的1.5倍。
宽高比描述	当图片宽高比不符合要求时显示的提示信息。例如”请上传16:9比例的图片”。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。
隐藏	控制组件是否隐藏。与”可见”相反。
禁用	控制组件是否禁用。禁用后组件变灰且不可操作。
隐藏时删除字段	开启后，当该组件被隐藏时，其值会从表单数据中删除。

校验折叠组

配置项	说明
必填	开启后，该字段必须上传图片才能提交表单。

事件

事件折叠组

配置项	说明
添加事件	支持”值变化”、“移除文件”、“上传成功”、“上传失败”四种触发事件。“值变化”在图片上传完成或被移除时触发，常用于在图片上传后自动调用工作流进行图片识别或处理。“上传成功”和”上传失败”可用于显示相应的提示信息。