上传按钮(AntdUploadButton)组件
本文将介绍上传按钮(AntdUploadButton)组件的使用,上传按钮组件功能分【内容】及【样式】两块选项,用户根据自己的需求进行内容的编辑及样式的修改
一、内容
1、属性
1.1 支持文件类型
点击旁边的JS图标可以自行编写代码
可以设置上传后文件的数据格式,默认支持任意文件类型、图片、视频、音频、文本、Word、Excel、PDF、JPEG、PNG、CSV

除此之外,更多文件类型可以参考:MIME 类型

1.2 数据格式
可以设置上传后文件的数据格式,支持自动解析、解析为结构化数据、Base64、Binary、Text五种类型数据结构

1.2.1 自动解析
根据上传文件类型,自动匹配合适的读取和解析方式:csv、xls、解析为 ArrayOfObject;图片解析为 Base64;txt、xml、md 解析为 text;压缩包(zip、rar、tar)和二进制文件(exe、ios、dll)解析为 Binary;
1.2.2 解析为结构化数据
解析为结构化数据(JSON、CSV、XLS、 XML 等);注意:组件中使用大文件可能会让应用变得卡顿;
1.2.3 Base64
适合小文件(如图像),对于较大的文件,Base64 编码可能带来明显的性能下降;
1.2.4 Binary
读取文件为二进制 Binary;
1.2.5 Text
适用于文本类型的文件,比如 .txt、.csv、.json 等,注意文本格式无法直接处理二进制数据,如图像、视频、音频等。这需要先将二进制数据转换为文本格式(如 Base64);
1.3 最大上传文件数量
可以设置上传文件的最大数量,默认为空不限制数量

1.4 是否支持文件夹
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
开启该功能后,支持以文件夹的方式批量上传文件

1.5 是否显示上传列表
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
开启该功能后,组件下方能以列表的方式展现已上传的文件

2、标签
2.1 组件文本
可以设置上传按钮组件显示的文本内容

2.2 标签
可以设置上传按钮组件的文本标题,如果不需要显示文本,选项为空即可,可以看下面的示例子:

2.3 位置
可以设置上传按钮组件标题的位置,有3类选项可选择:自动、左、上
名称 | 描述 |
---|---|
自动 | 标签与组件自动对齐 |
左 | 文本标题摆在组件的左侧 |
上 | 文本标题摆在组件的顶部 |

2.4 提示文本
可以设置对用户的提示内容,会显示在组件的下方

3、校验
3.1 必填
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置该组件是否为必填项

3.2 最大上传文件大小(Mb)
可以设置上传文件的最大值,单位为Mb,默认为空,不限制文件大小;

3.3 最小上传文件大小(Mb)
可以设置上传文件的最小值,单位为Mb,默认为0;

4、属性
4.1 标签提示
该功能需要有标签的情况下才可使用
开启该功能后,在文本标题右侧会有一个❓号的提示标识,供用户查看提示消息

4.2 显示冒号
该功能需要有标签的情况下才可使用
开启该功能后,在文本标题右侧会有一个:号的提示标识

4.3 是否显示
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置上传按钮组件在页面上是否可见

4.4 禁用
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置上传按钮组件在页面上是否可用

4.5 加载时显示动画
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置上传按钮组件在数据加载渲染的时候是否显示动画效果

4.6 提交成功后重置
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置上传按钮组件上传成功后是否重置上传列表,开启该功能后,文件上传完将被清空

4.7 高度
该功能可以配置上传按钮组件的高度大小
名称 | 描述 |
---|---|
固定高度 | 通过拖拽边框来控制组件的大小,使其固定不变 |
自动高度 | 组件根据画布内容及其他情况可以自行动态调整 |
区间自动高度 | 与自动高度差不多,支持设置组件占用的最小、最大行数 |

5、事件
5.1 onUpload
点击旁边的JS图标可以自行编写代码
可以设置上传文件时触发的事件动作

5.2 onRemove
点击旁边的JS图标可以自行编写代码
可以设置文件上传成功后,删除文件触发的事件动作

二、组件属性
2.1 file
该属性是获取当前要处理的文件对象,可以看下面的示例:
2.2 files
该属性可以获取当前所有的文件对象,files[0]就是最新的,可以看下面的示例:
2.3 isDisabled
该属性可以反应组件的可用状态,是True还是False,可以看下面的示例:
{{AntdUploadButton1.isDisabled}}

2.4 isVisible
该属性可以反应组件的可见状态,是True还是False,可以看下面的示例:
{{AntdUploadButton1.isVisible}}

2.5 isValid
该属性可以反应组件的可见状态,是True还是False,可以看下面的示例:
{{AntdUploadButton1.isValid}}

三、组件属性设置方法
3.1 setDisabled
该方法可以设置isDisabled属性的值,可以看下面的示例:
{{AntdUploadButton1.setDisabled(true)}}

3.2 setVisibility
该方法可以设置isVisible属性的值,可以看下面的示例:
{{AntdUploadButton1.setVisibility(false)}}
