设置UI引擎前端页面文件上传组件属性
文件上传组件适用于文档/数据文件上传场景（如设备运维报告上传、生产报表提交、工艺图纸上传等），支持文件类型/数量限制、自定义上传逻辑等精细化管控。
前提条件
已在当前页面添加“文件上传”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“文件上传”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
上传地址 |
文件上传的目标接口地址。如果未启用自定义上传函数，则文件将直接上传到此地址。 |
是 |
|
自动上传 |
是否在选择文件后自动上传。
|
是 |
|
上传时额外参数 |
文件上传接口的附加参数（如设备ID、工单编号等业务标识），补充默认仅传文件的不足，适配接口参数要求。 |
是 |
|
自定义请求头 |
上传接口的自定义请求头配置（如token鉴权凭证、Content-Type等），满足系统接口的权限校验/格式要求。 |
是 |
|
上传的文件列表 |
当前已上传或待上传的文件列表。支持双向绑定，可用于展示/回显文件上传记录。 |
是 |
|
支持多选文件 |
是否支持一次性选择多个文件。
|
是 |
|
禁用 |
是否禁用上传功能。
|
是 |
|
最大允许上传个数 |
允许上传的最大文件数量，默认不限制，最小值为1。 |
是 |
|
限制文件类型 |
允许上传的文件后缀名，多类型以英文逗号（,）分隔（如“.doc,.docx,.pdf,.xlsx”），用于管控文件格式（如仅允许上传报表类Excel、图纸类PDF）。 |
是 |
|
上传文件之前的钩子函数 |
在文件上传前执行的操作，可用于校验文件类型和大小。返回“false”或调用“reject”方法可阻止上传。 |
是 |
|
自定义上传函数 |
覆盖默认上传行为的自定义函数，实现更灵活的文件上传逻辑（如分片上传、断点续传等高级功能）。 |
是 |
|
文件移除回调 |
移除文件时的回调函数，用于处理文件从文件列表中移除。 |
是 |
|
上传按钮名称 |
文件上传按钮显示的文字，默认为“上传附件”。 |
是 |
|
上传按钮类型 |
文件上传按钮的样式类型。
|
是 |
|
上传提示 |
文件上传的提示信息，用于提示文件类型、大小等限制。 |
是 |
|
提示位置 |
上传提示信息的位置，可选值：
|
是 |
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
插槽信息
插槽用于自定义组件展示内容，适配个性化界面需求。
|
插槽名称 |
说明 |
|---|---|
|
触发文件选择框的内容 |
自定义文件选择触发区域。
|
|
提示说明文字 |
自定义上传提示区域。可添加图标、富文本、样式等，替代默认纯文本提示，提升提示信息的可读性。 |
组件事件
|
事件名称 |
类型定义 |
说明 |
|---|---|---|
|
onChange |
(file: IFile, fileList: IFile[]) => void |
文件状态变更时触发（添加/上传成功/上传失败）：
|
|
onClick |
(e: MouseEvent) => void |
组件被单击时触发，为原生浏览器事件，参数为鼠标事件对象。 |
|
onFocus |
(e: MouseEvent) => void |
组件获得焦点时触发，为原生浏览器事件，参数为鼠标事件对象。 |
|
onMousemove |
(e: MouseEvent) => void |
鼠标在组件区域移动时触发，为原生浏览器事件，参数为鼠标事件对象。 |
组件实例方法
可通过“ref”调用实例方法，实现文件上传的手动管控，适配自定义操作需求。
|
方法名称 |
类型定义 |
说明 |
|---|---|---|
|
abort |
() => void |
取消正在进行的上传请求。 |
|
clearFiles |
() => void |
清空已上传已选择的文件列表。 注意：不支持在“before-upload”中调用。 |
|
submit |
() => void |
手动触发文件上传（仅在禁用自动上传时生效）。 |
组件实例仅可在JS面板中通过以下方式访问：
// 手动触发上传
this.$('fileUploadRef').ref.submit()
// 取消上传请求
this.$('fileUploadRef').ref.abort()
// 清空文件列表
this.$('fileUploadRef').ref.clearFiles()
其中，“fileUploadRef”为组件“ref引用类”属性配置的值。
