盘古低代码图片上传
介绍
基本表单组件，用于用户上传图片。
API
Props
Props 属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 默认状态 | 组件的状态, "默认"|"禁用"|"隐藏"|"只读" | string | 'default' |
| 标题 | 组件的标题文案 | string | '输入框' |
| 显示标题 | 是否显示标题 | boolean | true |
| 字段占比 | 组件宽度在父容器中的占比，"25%"|"50%"|"75%"|"100%" | string | '100%' |
| 默认值 | 组件的默认值类型 | string[] | {name: string; url: string}[] | [] |
| 数据字段 | 表单字段名 | string | "UPLOAD_FILE_随机八位字符" |
| API绑定 | 上传api，左侧接口列表配置 | string | - |
| 列表样式 | 文字 | 图片 | 照片墙 | string | 文字 |
| 拖拽 | 文件是否拖拽上传 | boolean | false |
| 拖拽提示信息 | 拖拽上传模式下的提示信息 | string | - |
| 按钮内容 | 上传按钮文案 | string | 图片上传 |
| 按钮类型 | 主要按钮 | 次要按钮 | 线框按钮 | string | 次要按钮 |
| 多选 | 文件是否可多选 | boolean | false |
| 上传文件名 | 上传接口传参名称 | string | files |
| 额外数据 | 上传接口body中的额外参数 | object | {} |
| 头部信息 | 上传接口header中的额外参数 | object | {} |
| 最大上传文件个数 | 最大上传文件个数 | number | 6 |
| 单文件最大上传大小(MB) | 单文件最大上传大小 | number | 20 |
| 是否允许请求cookie | 是否允许请求cookie | boolean | false |
| 上传文件类型 | 上传文件类型 | string | - |
| 上传前压缩 | 上传前是否对图片进行压缩 | boolean | true |
| 开启预览 | 是否显示预览按钮 | boolean | false |
| 预览事件绑定 | 自定义点击预览事件 | (ctx, params:{fileItem:any}, loop) => previewEvent | |
| 开启下载 | 是否显示下载按钮 | boolean | true |
| 下载事件绑定 | 自定义点击下载事件 | (ctx, params:{fileItem:any}, loop) => downloadEvent |
注意
上传组件的 默认值 数据类型与高级中 默认值数据格式 设置有关，默认值数据格式为「默认」默认值 数据类型为url字符串数组，例:["/bucket/test.png", ...]。默认值数据格式为「对象数组」则 默认值 数据类型为对象数组，格式为:[{url: "xxxx", name: "xxx文件"}, ...]
Props 样式
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 盒子模型属性设置 | 设置组件的盒子模型相关的各项样式属性值,包括margin、border、padding | - | - |
Props 高级
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 唯一标识 | 组件的唯一标识 | string | - |
| 默认值数据格式 | 默认 | 对象数组 | string | default |
| 补充说明 | 表单项底部的说明文字 | string | '' |
| 气泡提醒 | 组件旁边图标悬浮显示的说明性文字 | string | - |
| 必填 | 未输入内容时校验不通过 | boolean | false |
| 自定义函数 | 自定义校验函数，可配置校验规则与校验提示内容 | boolean | false |
| 循环 | 循环渲染设置 | - | - |
Events
Events 属性
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| onSuccess | 上传成功时触发 | ctx, {fileItem: 文件对象}, loopDataList: LoopData[] |
| onError | 上传失败时触发 | ctx, {fileItem: 文件对象}, loopDataList: LoopData[] |
| onChange | 上传的文件状态发生改变时触发 | ctx, {fileItem: 文件对象, fileList: 文件列表}, loopDataList: LoopData[] |
| onExceeLimit | 上传的文件超出限制后触发 | ctx, {fileItem: 文件对象, fileList: 文件列表}, loopDataList: LoopData[] |
| onPreview | 点击图片预览时触发 | ctx, {fileItem: 文件对象}, loopDataList: LoopData[] |
| onProgress | 上传中的文件进度改变时触发 | ctx, {fileItem: 文件对象, ev: ProgressEvent}, loopDataList: LoopData[] |
| onBeforeUpload | 上传前 | ctx, file: 文件对象, loopDataList: LoopData[] |
| onBeforeRemove | 移除文件前触发 | ctx, fileItem: 文件对象, loopDataList: LoopData[] |
Type
LoopData
| 参数名 | 描述 | 类型 |
|---|---|---|
| indexName | 索引变量名 | string |
| paramName | 迭代变量名 | string |
| row | 当前迭代数据元素 | any |
| rowIndex | 当前迭代数据索引 | any |
| ref | 完整循环数组数据 | ComputedRefImpl<Array> |