图片上传

图片上传组件用于上传和展示图片，常用于图像内容的管理。用户在前端界面中上传的图片可以作为组件的值（value）传递给工作流的图片类型入参，图片类型入参再将图片以 URL 形式传递给下游节点。

使用说明

图片上传组件的值为 String 类型，格式为 {"bytes":204010,"created\_at":1745759048,"file\_name":"Snipaste\_2025-04-27\_17-22-45.png","id":"7497976797368516618","file\_id":"7497976797368516618"}。即通过图片上传组件上传图片后，仅生成图片 ID，不会直接生成图片 URL。

你可以在工作流中，将输入参数的数据类型设置为 Image，然后将图片上传组件的值传递给该输入参数。系统会自动解析并获取图片的 URL，再将该 URL 传递给下游节点，从而实现图片数据的高效处理。

属性设置

图片上传组件支持丰富的属性设置，例如常用设置、位置设置、尺寸设置、样式设置和可见性设置。

常用设置

属性	说明
标签	配置是否显示图片上传组件的标签，标签可以为图片上传组件提供文字描述，使用户能够更直观地理解图片上传组件的状态或功能。 默认打开显示标签的开关。
标签内容	配置图片上传组件的标签内容，支持配置静态内容和动态绑定数据，详情请参见 设置组件内容参数 。 仅打开了图片上传组件的标签开关时，才支持此配置项。默认标签内容为 请上传图片 。
辅助文案	配置图片上传组件的辅助文案，辅助文案是指在图片上传组件中显示的指导性文本，用于告诉用户如何操作或需要上传何种类型的图片。
文案内容	默认文案内容为 上限 5 张图片，最大 5 MB/个，支持 png、jpg 格式 ，你可以自定义修改文案内容 。
总数上限	总数上限是指用户可以上传的图片总数的最大值，最大可设置为10。通过设置这个参数，可以限制用户一次性上传的图片数量，避免服务器过载或数据量过大。
大小上限	配置单个图片最大允许上传的大小。
组件布局	配置标签与图片上传区域的布局方式，支持上下布局和左右布局。
垂直对齐	配置图片上传组件的垂直对齐方式。 范围：顶部对齐、垂直居中对齐、底部对齐。 默认值：顶部对齐。
每行张数	图片上传后，每行能展示的图片张数，最大可设置 5。
图片圆角	图片上传后，图片的圆角，支持单独设置四个角的圆角。

位置设置

图片上传组件提供三种位置类型选项，以灵活配置组件在界面中的位置。

• 相对定位：堆叠布局下，元素自动向下或向右排列。

• 绝对定位：页面滚动时，绝对定位的元素会随页面一起滚动。

• 固定定位：页面滚动时，固定定位的元素会保持固定位置不变。

尺寸设置

属性	说明
宽度	配置图片上传组件的宽度值，支持以下宽度设置方式： 固定：固定的像素值，不会随容器大小变化。 百分比：元素的宽度占容器宽度的百分比。 填充容器：元素的宽度填满容器的可用空间。 适应内容：元素的宽度会随着内容的大小自动调整。
高度	配置图片上传组件的高度值，支持以下高度设置方式： 固定：固定的像素值，不会随容器大小变化。 百分比：元素的高度占容器高度的百分比。 填充容器：元素的高度填满容器的可用空间。 适应内容：元素的高度会随着内容的大小自动调整。
尺寸限制	配置图片上传组件的尺寸限制，支持配置最大高度、最小高度、最大宽度、最小宽度。 合理设置尺寸限制参数可以确保组件在不同屏幕尺寸下保持布局的稳定性和一致性，避免因屏幕尺寸差异而导致的布局问题。

样式设置

属性	说明
填充	配置图片上传组件背景的显示颜色。
圆角	配置图片上传组件背景的圆角，支持单独设置四个角的圆角。
内边距	配置图片上传组件背景的内边距，可以单独设置四个方向的内边距。
外边距	配置图片上传组件背景的外边距，可以单独设置四个方向的外边距。
边框	配置图片上传组件背景的边框样式。支持如下设置方式： 预设样式：提供预设的边框样式，可直接使用。 自定义样式：通过边框线的颜色、粗细和样式，自定义边框样式。
阴影	配置图片上传组件背景的阴影样式，增强组件的立体感。支持如下设置方式： 预设样式：提供预设的阴影样式，可直接使用。 自定义样式：支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色，自定义阴影样式。
图层模糊	配置图片上传组件的模糊效果。数值越大，模糊效果越明显。
溢出	配置图片上传组件溢出相关设置，支持以下溢出方式： 滚动：添加滚动条以查看超出的内容。 可见：显示全部内容。 隐藏：隐藏超出容器的内容。

变换设置

丰富界面视觉效果的参数。

属性	说明
缩放	配置图片上传组件大小的缩放比例。
旋转	配置图片上传组件围绕中心点旋转的角度。
位移	配置图片上传组件在水平和垂直方向上的移动距离。
倾斜	配置图片上传组件在水平和垂直方向上的倾斜角度。

状态设置

控制图片上传组件禁用态、加载态、点击态和出现态的视觉效果参数。

属性	说明
禁用态	配置图片上传组件的禁用状态。具体配置说明如下： 设置为 true：组件处于禁用状态。 设置为 false：组件处于可用状态。 设置为变量：通过变量值（true 或 false）动态控制图片上传组件的禁用状态。 例如可以通过工作流控制图片上传组件的禁用状态。工作流为 example_workflow ，当你将图片上传组件 禁用态 设置为 {{example_workflow.disable.value}} 后，当工作流的 disable 属性为 true 时， {{example_workflow.disable.value}} 值为 true，图片上传组件将处于禁用状态。
加载态	配置图片上传组件的加载状态。具体配置说明如下： 设置为 true：组件展示加载状态，隐藏组件内容。 设置为 false：关闭加载状态。 设置为变量：通过变量值（true 或 false）动态控制图片上传组件的加载状态。 例如可以通过单行输入组件控制图片上传组件的加载状态。单行输入组件 ID 为 Input1 ，当你将图片上传组件的 加载态 设置为 {{Input1.value}} 后，在单行输入组件中输入文本时， {{Input1.value}} 值为 true，图片上传组件展示加载态。
点击效果	配置图片上传组件的点击态效果。具体配置说明如下： 样式效果：点击图片上传组件时，图片上传组件的样式变化情况。详细说明，请参考 样式设置 。 变换效果：点击图片上传组件时，图片上传组件的动态变化情况。详细说明，请参考 变换设置 。 过渡效果：设置图片上传组件点击态的动画效果。 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 持续时间：设置动画的持续时间，单位为毫秒。 延迟时间：设置动画延迟出现的时间，单位为毫秒。 生效范围：设置动画的生效范围。 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。
出场效果	设置图片上传组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入等动画效果。

可见性设置

控制图片上传组件隐藏或显示的参数，支持在特定条件下隐藏图片上传组件。

• 设置为 false：显示组件。

• 设置为 true：隐藏组件。

• 设置为变量：通过变量值（true 或 false）动态控制图片上传组件的可见性。

• 例如可以通过单行输入组件控制图片上传组件的可见性。单行输入组件 ID 为 Input1，当你将图片上传组件的可见性设置为{{ Input1.value}}后，在单行输入组件中输入文本时，{{ Input1.value}}值为 true，图片上传组件将被隐藏。

事件设置

通过配置图片上传组件的事件，可以为图片上传组件添加丰富的交互功能，以增强用户体验和界面的互动性。

事件项	说明
事件类型	数据改变时：在图片上传过程中，图片数据发生变化时触发事件。
组件方法	支持以下方法： 设置禁用：使组件变为禁用状态，用户无法与之交互。 设置隐藏：隐藏组件，使其不可见。 上传：上传图片。

当前版本实操

本页使用独立的 图片上传 示例页面，页面内不混放其他组件。

1. 进入低代码应用的 用户界面，确认搭建类型为 小程序和 H5。
2. 单击画布底部的 新建页面，创建一个空白页面。
3. 在左侧 组件 面板中找到 图片上传，单击或拖入当前页面。
4. 切换到 结构 面板，确认该页面只包含当前 图片上传 组件。
5. 选中组件，在右侧 属性 面板中检查图片类型、数量、大小限制和上传展示。
6. 检查画布中的实际显示效果，再使用页面顶部的预览入口验证交互。