跳到主要内容

FileDrop 文件拖放

让用户把文件拖进来或点击选择。组件只负责收文件并按类型、大小筛选，不负责上传；已选文件的列表和上传进度请自己展示。

基本用法

背后是一个铺满整块的真 input[type=file]：点击、或 Tab 聚焦后按空格 / Enter，都由浏览器打开文件选择框。拖着文件经过时整块高亮。

筛选、列表与错误

accept 支持扩展名、MIME 和 image/* 这类通配；maxSize 是单个文件的字节上限。通过的文件进 onChange，被挡下的进 onReject。组件是非受控的：每次选择只回传这一次的文件，累加和去重由你决定。

PNG / JPG / PDF，单个不超过 2 MB

文案与状态

API

属性

属性类型默认值说明
onChange(files: File[]) => void—选了或拖入了文件：参数是通过筛选的文件。没开 multiple 时最多一个。
onReject(files: File[]) => void—被 accept / maxSize 挡下的文件。
acceptstring—允许的类型，逗号分隔：.pdf、image/png、image/*。拖入的文件也按它筛选。
multipleboolean—允许一次选多个。
maxSizenumber—单个文件的大小上限（字节）。
titleReactNode'把文件拖到这里，或点击选择'主文案。
hintReactNode—副文案（格式、大小限制等）。
iconReactNode—自定义图标，默认是上传图标。
invalidboolean—校验失败。在 Field 里默认跟随 Field。
disabledboolean—禁用：不能点击，也不接收拖入。
childrenReactNode—追加在文案下面的内容。
rootClassName / rootStylestring / CSSProperties—外层 <label> 的类名与样式。className / style 同样落在 <label> 上。
…restInputHTMLAttributes—其余原生属性（name、required、capture…）和 ref 落在 <input type="file"> 上。

无障碍

  • 真正可聚焦的是原生 <input type="file">，外层是包着它的 <label>，所以主文案和副文案就是它的可读名称。
  • Tab 聚焦，Space / Enter 打开系统的文件选择框。拖放只是鼠标用户的捷径，键盘始终可用。
  • 选完后组件里有一行 aria-live 文字播报结果（“已选择 a.png”“2 个文件不符合要求”）。
  • 被拒绝的原因请写进 Field 的 error，说清楚是哪个文件、为什么。
  • 没有可见标题时请给 aria-label。