图片上传
该组件是低代码平台中专用于上传单张或多张图片的表单项,基于 <UploadImg>, <UploadImgs> 封装并针对图像场景优化,支持拖拽、尺寸/圆角样式定制、文件限制、多图上传及目录指定,并深度集成表单容器(<el-form>)的数据绑定与校验体系。
基础属性
| 属性 | 类型 | 说明 |
|---|---|---|
是否拖拽上传 drag | boolean | 启用拖拽区域(用户可将图片拖入上传区) |
宽度 width | string | 上传区域或预览图的宽度(支持 CSS 单位,如 120px、10rem) |
高度 height | string | 上传区域或预览图的高度(支持 CSS 单位) |
边框圆角 borderradius | string | 预览图或上传区域的圆角(如 8px、50% 实现圆形头像) |
指定上传目录 directory | string | 服务器端存储路径前缀(如 'avatar/user/'),用于后端分类管理 |
文件类型 fileType | string[] | 允许上传的图片类型(如 ['.png','.jpg','.webp']) |
大小限制(MB) fileSize | number | 单张图片最大允许大小(单位:MB) |
是否支持多图上传 multiple | boolean | 启用后可选择并上传多张图片 |
数量限制 limit | number | 多图模式下最多可上传的图片数量(仅当 multiple 启用时生效) |
是否显示按钮文字 showBtnText | boolean | 单图模式下是否在上传按钮中显示文字(如“点击上传”) |
| 表单项基础配置 | — | 包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine) |
高级属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 表单项高级配置 | — | 包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine) |
事件
| 事件 | 触发时机 | 说明 |
|---|---|---|
change | 图片上传列表发生变化时 | 返回当前所有已上传图片的元数据数组(结构由上传服务决定) |
