Skip to content

图片上传

该组件是低代码平台中专用于上传单张或多张图片的表单项,基于 <UploadImg>, <UploadImgs> 封装并针对图像场景优化,支持拖拽、尺寸/圆角样式定制、文件限制、多图上传及目录指定,并深度集成表单容器(<el-form>)的数据绑定与校验体系。

基础属性

属性类型说明
是否拖拽上传 dragboolean启用拖拽区域(用户可将图片拖入上传区)
宽度 widthstring上传区域或预览图的宽度(支持 CSS 单位,如 120px10rem
高度 heightstring上传区域或预览图的高度(支持 CSS 单位)
边框圆角 borderradiusstring预览图或上传区域的圆角(如 8px50% 实现圆形头像)
指定上传目录 directorystring服务器端存储路径前缀(如 'avatar/user/'),用于后端分类管理
文件类型 fileTypestring[]允许上传的图片类型(如 ['.png','.jpg','.webp']
大小限制(MB) fileSizenumber单张图片最大允许大小(单位:MB)
是否支持多图上传 multipleboolean启用后可选择并上传多张图片
数量限制 limitnumber多图模式下最多可上传的图片数量(仅当 multiple 启用时生效)
是否显示按钮文字 showBtnTextboolean单图模式下是否在上传按钮中显示文字(如“点击上传”)
表单项基础配置包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine

高级属性

属性类型说明
表单项高级配置包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine

事件

事件触发时机说明
change图片上传列表发生变化时返回当前所有已上传图片的元数据数组(结构由上传服务决定)