设置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引用类”属性配置的值。
