# 设置UI引擎前端页面文件上传组件属性 文件上传组件适用于文档/数据文件上传场景（如设备运维报告上传、生产报表提交、工艺图纸上传等），支持文件类型/数量限制、自定义上传逻辑等精细化管控。 #### 前提条件 已在当前页面添加"文件上传"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 #### 配置入口 1. 在页面设计器的中心画布区，单击选中"文件上传"组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535567151.png)，即可展开"属性"设置面板。 #### 基础信息 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 上传地址 | 文件上传的目标接口地址。如果未启用自定义上传函数，则文件将直接上传到此地址。 | 是 | | 自动上传 | 是否在选择文件后自动上传。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002499853266.png "点击放大")：关闭自动上传，手动调用"submit"方法上传。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002499693300.png "点击放大")：开启自动上传，选中文件后立即上传。默认开启。 | 是 | | 上传时额外参数 | 文件上传接口的附加参数（如设备ID、工单编号等业务标识），补充默认仅传文件的不足，适配接口参数要求。 | 是 | | 自定义请求头 | 上传接口的自定义请求头配置（如token鉴权凭证、Content-Type等），满足系统接口的权限校验/格式要求。 | 是 | | 上传的文件列表 | 当前已上传或待上传的文件列表。支持双向绑定，可用于展示/回显文件上传记录。 | 是 | | 支持多选文件 | 是否支持一次性选择多个文件。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002506673624.png "点击放大")：单选（只能选1个文件）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002538473363.png "点击放大")：多选（可批量选择文件）。 | 是 | | 禁用 | 是否禁用上传功能。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002506833456.png "点击放大")：不禁用，可正常选择/上传文件。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002538553329.png "点击放大")：禁用，无法触发文件选择框，禁止所有上传操作。 | 是 | | 最大允许上传个数 | 允许上传的最大文件数量，默认不限制，最小值为1。 | 是 | | 限制文件类型 | 允许上传的文件后缀名，多类型以英文逗号（,）分隔（如".doc,.docx,.pdf,.xlsx"），用于管控文件格式（如仅允许上传报表类Excel、图纸类PDF）。 | 是 | | 上传文件之前的钩子函数 | 在文件上传前执行的操作，可用于校验文件类型和大小。返回"false"或调用"reject"方法可阻止上传。 | 是 | | 自定义上传函数 | 覆盖默认上传行为的自定义函数，实现更灵活的文件上传逻辑（如分片上传、断点续传等高级功能）。 | 是 | | 文件移除回调 | 移除文件时的回调函数，用于处理文件从文件列表中移除。 | 是 | | 上传按钮名称 | 文件上传按钮显示的文字，默认为"上传附件"。 | 是 | | 上传按钮类型 | 文件上传按钮的样式类型。 - info：按钮填充背景色，色值为"#1476ff"。 - default：普通按钮样式。 | 是 | | 上传提示 | 文件上传的提示信息，用于提示文件类型、大小等限制。 | 是 | | 提示位置 | 上传提示信息的位置，可选值： - 下：按钮下方显示提示信息。默认为"下"。 - 右：按钮右侧显示提示信息。 | 是 | #### 其他 如下属性适用于UI引擎所有组件，用于精细化控制。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 元素id值 | 对应HTML标签的"id"属性，同一页面内必须唯一。 | 是 | | 样式类 | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。 | 是 | | ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是 | #### 插槽信息 插槽用于自定义组件展示内容，适配个性化界面需求。 | 插槽名称 | 说明 | |:---|:---| | 触发文件选择框的内容 | 自定义文件选择触发区域。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002499854894.png "点击放大")：关闭插槽，使用默认按钮触发选择。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002531614799.png "点击放大")：启用插槽，画布显示插槽占位，可拖动其他组件（如图标、卡片）替换默认按钮，适配界面个性化布局。 | | 提示说明文字 | 自定义上传提示区域。可添加图标、富文本、样式等，替代默认纯文本提示，提升提示信息的可读性。 | #### 组件事件 | 事件名称 | 类型定义 | 说明 | |:---|:---|:---| | onChange | ``` (file: IFile, fileList: IFile[]) => void ``` | 文件状态变更时触发（添加/上传成功/上传失败）： - file：当前变更的文件对象。 - fileList：最新的文件列表。 | | 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引用类"属性配置的值。