--- url: /components/uploader.md --- # Uploader 上传 `Uploader` 与 `UploadArea` 只负责**选择文件**：打开原生选择框、接收拖拽，把 `File` 对象交给调用方。 它们不发请求、不管理进度、也不保存文件——上传由你自己完成。 | 组件 | 形态 | | ------------ | ------------------------------------------------------ | | `Uploader` | 只提供行为和一个插槽：点击插槽里的内容就打开文件选择框 | | `UploadArea` | 一整块可拖拽、可点击的上传区域，默认内容可以整体替换 | 两者都接受原生 `accept` 与 `multiple`，选中结果通过 `select` 事件给出。 ## 点击上传 把可聚焦的控件（通常是 [`Button`](/components/button)）放进 `Uploader` 的插槽。点击插槽里的任意位置都会 打开文件选择框；`Uploader` 本身不渲染任何可见样式。 当前选择：{{ picked.length ? picked.join("、") : "（还没有选择）" }} ```vue ``` `Uploader` 的根是一个没有布局限制的 `div`（`inline-block`），`class` / `style` 照常透传。它不额外添加 `role` 或 `tabindex`：无障碍语义与键盘操作由插槽里的控件提供，所以不要只放一段不可聚焦的文字。 插槽可以拿到 `open` 与 `disabled`，需要自己触发时用它们；组件实例也暴露了 `open()` 方法： ```vue ``` ```ts const uploader = ref | null>(null); uploader.value?.open(); ``` `disabled` 会拦截根节点上的点击（包括插槽控件的点击冒泡），并给根节点加上 `aria-disabled="true"`； 插槽里的控件应自行设置 `disabled`，避免看起来仍然可用、也避免它自己的键盘操作仍然生效。 ## 上传区域 `UploadArea` 默认渲染一块最小高度 128px 的虚线区域：拖拽时描边与底色变化，点击或按 Enter / 空格打开选择框。 当前选择：{{ dropped.length ? dropped.join("、") : "（还没有选择）" }} ```vue ``` `label` 是默认内容的主文案，同时作为整个区域的无障碍名称；`description` 是第二行说明，两行都可以用插槽 完全替换。 ### 拖拽也会按 accept 筛选 原生 `` 会自己过滤 `accept`，但拖拽不会。`UploadArea` 在 `drop` 时按同一套规则 （扩展名、精确 MIME、`image/*` 这类通配）筛选，把不符合的文件通过 `invalid` 事件交给你提示： 最近一次被拒绝：{{ rejected.length ? rejected.join("、") : "（没有）" }} ```vue ``` * 不符合 `accept` 的文件只进入 `invalid`，不会进入 `select`； * `multiple` 为 `false` 时，一次拖入多个符合的文件只取第一个，其余静默忽略（与单文件 input 一致）； * 拖拽与点击共用同一套 `accept` / `multiple`，不会出现两条路径行为不同。 ## 自定义区域内容 默认插槽替换整块区域的内容，并拿到 `{ open, dragging }`：`dragging` 在文件悬停到区域上方时为 `true`。 自定义内容：{{ custom.length ? custom.join("、") : "（还没有选择）" }} ```vue ``` 插槽内容始终在可点击区域里，点击其中的文字、图标同样会打开选择框。需要阻止某块内容触发选择时，在它上面 加 `@click.stop`。插槽只放展示内容即可，不要再放第二个上传控件。 ## 文本输入 / 粘贴 传 `text` 后，区域下方多出一个文本框：用户可以像上传文本文件一样，直接把内容输入或粘贴进来。文本内容 用 `v-model:value` 双向绑定，与 `select` 给出的文件互不影响。 已输入 {{ note.length }} 个字符，已选择 {{ dropped.join("、") }} ```vue ``` `textRows` 控制文本框初始行数（默认 3），`textPlaceholder` 同时作为文本框的占位文字与无障碍名称。 文本框复用库里的 [`Input`](/components/input)（`textarea` 变体），描边、聚焦、禁用与表单里完全一致； 输入与粘贴仍由原生 `