File Input 文件选择
Rue File Input 展示基础file-input样式入口，同时补充更常用的 文件列表、拖拽、图片卡片、受控/非受控和选择前校验能力。
支持优先
不传语义 API 时，仍然直出原生文件输入框。
推荐增强
列表、拖拽、图片卡片
把最常见的 Upload 场景收敛到一个组件里，业务只关心列表状态。
业务可接管
拦截、预览、删除都可自定义
适合手动上传、服务端校验和媒体素材管理等场景。
# Recommended upload-like
适合“先选择，再统一上传”的工作流，默认列表已接近 Upload 的核心体验。
# Controlled fileList
当前为受控模式，列表变化会先进入业务状态，再决定何时上传。
# Dragger
# Picture Card
点击卡片右上角预览按钮，会在这里记录最近一次预览。
# beforeUpload Validation
仅允许 `image/*`，且每个文件不超过 2MB。
# File input
# File input ghost
# With fieldset and label
# File input sizes
# File input colors
# Disabled
API
语义模式尽量贴近 Upload 的核心组织方式，但仍然使用 Rue 的视觉和更轻的心智负担。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color / variant / size / ghost | `color` 对齐 Rue Design 语义色；`variant` 作为颜色写法支持。不传语义 API 时仍直接渲染原生 input。 | FileInputColor / FileInputVariant / FileInputSize / boolean | - |
fileList / defaultFileList | 受控与非受控文件列表；条目支持 `uid/name/status/url/thumbUrl/originFileObj/description`。 | FileInputFile[] | - |
listType | 切换文本列表、缩略图列表和图片卡片栅格。 | 'text' | 'picture' | 'picture-card' | 'text' |
drag / FileInput.Dragger | 启用拖拽选区；`FileInput.Dragger` 是 `drag` 的快捷写法。 | boolean | false |
showUploadList | 控制列表显隐，或进一步配置预览/删除图标、extra 和 itemRender。 | boolean | FileInputShowUploadList | true |
beforeUpload | 选择前拦截或转换文件；返回 `FileInput.LIST_IGNORE` 可阻止文件进入列表。 | (file, fileList) => boolean | File | Blob | Promise<...> | - |
maxCount / multiple / directory | 限制数量、开启多选或目录选择；`maxCount=1` 时自动保持最新文件。 | number / boolean / boolean | - |
onChange / onPreview / onRemove | 语义模式下返回 Upload 风格的列表信息，便于业务侧接管上传、预览和删除确认。 | function | - |
title / description / hint / buttonText / empty | 快速定制触发区和空态文案，不必每次都自建包装容器。 | any | - |
rootClassName / triggerClassName / listClassName / itemClassName | 语义模式的根容器、触发区、列表和单项样式入口。 | string | - |
FAQ
它会自动上传文件吗？
不会。组件负责文件选择、列表展示和交互，真正上传仍建议在业务层根据onChange的结果触发。
怎样阻止文件进入列表？
在beforeUpload中返回FileInput.LIST_IGNORE，即可把非法文件直接挡在列表外。
当前项目需要调整吗？
不需要。基础的variant / size / ghost / disabled 写法继续可用，按需切换到语义模式即可。