用途:该技能用于使用 SGDS 的 <sgds-file-upload> 组件渲染文件上传按钮。选中文件会以列表形式显示,并带有关闭(移除)按钮,移除交互由组件自动处理。
主要能力:通过 accept 限制可接受的文件类型,支持 MIME 类型与扩展名(如 image/*、.pdf、image/jpeg,image/png);通过 multiple 允许多选。支持 label 字段标签、hintText 提示文本、name 表单字段名、required 必填、disabled 禁用。可通过 hasFeedback 启用校验反馈界面,配合 invalidFeedback 显示错误信息,也可用 invalid 手动设置无效状态。
使用方式:在默认插槽中放置按钮文字,例如 <sgds-file-upload label="Upload Document" hintText="PDF only, max 10MB" name="document" accept=".pdf">Choose File</sgds-file-upload>。多文件可加 multiple 属性。文件选择时触发 sgds-files-selected 事件,event.detail 为 FileList,可用 for...of 或索引访问;示例:document.getElementById("my-upload").addEventListener("sgds-files-selected", e => { const files = e.detail; })。
限制:使用前需参考 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)。该组件不暴露自定义属性或 CSS part,因此不能修改 CSS 样式。组件没有公开方法。
适用场景:需要符合 SGDS 设计规范的文件上传表单,如单文件上传、限定类型上传、多图上传及带校验反馈的身份证明等文档上传。