开发预览更新于 2026-05-10

FilePicker 文件选择

按钮触发文件选择对话框，自带选中文件列表。区别于 Dropzone（拖拽落区）。

基础用法

multiple 多选，accept MIME / 后缀过滤；选中文件以 chip 形式列在按钮旁，单个删除或一键清空。

背景

未选择文件

<script setup lang="ts">
import { ref } from 'vue';
import { CfFilePicker } from '@chufix-design/vue';
const files = ref<File[]>([]);
</script>

<template>
  <CfFilePicker v-model="files" multiple accept="image/*,application/json" />
</template>

<CfFilePicker value={files} onChange={setFiles} multiple accept="image/*" />

变体 / 尺寸 / 禁用

variant="plain" 取消按钮边框，作为链接式触发；disabled 全局禁用。

背景

single + outline

未选择文件

multiple + plain + size lg

未选择文件

disabled

未选择文件

<script setup lang="ts">
import { ref } from 'vue';
import { CfFilePicker } from '@chufix-design/vue';
const a = ref<File[]>([]);
const b = ref<File[]>([]);
const c = ref<File[]>([]);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div>
      <span style="font-size: 11px; color: var(--fg-3); margin-right: 8px;">single + outline</span>
      <CfFilePicker v-model="a" accept="image/*" />
    </div>
    <div>
      <span style="font-size: 11px; color: var(--fg-3); margin-right: 8px;">multiple + plain + size lg</span>
      <CfFilePicker v-model="b" multiple variant="plain" size="lg" button-text="批量上传" />
    </div>
    <div>
      <span style="font-size: 11px; color: var(--fg-3); margin-right: 8px;">disabled</span>
      <CfFilePicker v-model="c" disabled />
    </div>
  </div>
</template>

<CfFilePicker value={files} onChange={setFiles} variant="plain" size="lg" multiple />

API

属性	类型	默认值	说明
`modelValue` / `value`	`File[]`	`[]`
`multiple`	`boolean`	`false`
`accept`	`string`	—	同原生 `<input type=file>`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`variant`	`'outline' \| 'plain'`	`'outline'`
`disabled` / `showFiles`	`boolean`	`false` / `true`
`buttonText` / `emptyText`	`string`	`'选择文件'` / `'未选择文件'`