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

FilePicker 文件选择

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

基础用法

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

背景视口

未选择文件

src/App.vue

<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>

<script setup>
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>

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [files, setFiles] = useState([]);
  const [files, setFiles] = useState([]);
  return (
    <>
      <CfFilePicker value={files} onChange={setFiles} multiple accept="image/*" />
    </>
  );
}

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [files, setFiles] = useState([]);
  const [files, setFiles] = useState([]);
  return (
    <>
      <CfFilePicker value={files} onChange={setFiles} multiple accept="image/*" />
    </>
  );
}

变体 / 尺寸 / 禁用

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

背景视口

未选择文件

disabled

未选择文件

src/App.vue

<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>
      <CfFilePicker v-model="a" accept="image/*" />
    </div>
    <div>
      <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>

<script setup>
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>
      <CfFilePicker v-model="a" accept="image/*" />
    </div>
    <div>
      <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>

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<File[]>([]);
  const [b, setB] = useState<File[]>([]);
  const [c, setC] = useState<File[]>([]);
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <CfFilePicker value={a} onChange={setA} accept="image/*" />
          </div>
          <div>
            <CfFilePicker value={b} onChange={setB} multiple variant="plain" size="lg" button-text="批量上传" />
          </div>
          <div>
            <span style={{ fontSize: 11, color: "var(--fg-3)", marginRight: 8 }}>disabled</span>
            <CfFilePicker value={c} onChange={setC} disabled />
          </div>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<File[]>([]);
  const [b, setB] = useState<File[]>([]);
  const [c, setC] = useState<File[]>([]);
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <CfFilePicker value={a} onChange={setA} accept="image/*" />
          </div>
          <div>
            <CfFilePicker value={b} onChange={setB} multiple variant="plain" size="lg" button-text="批量上传" />
          </div>
          <div>
            <span style={{ fontSize: 11, color: "var(--fg-3)", marginRight: 8 }}>disabled</span>
            <CfFilePicker value={c} onChange={setC} disabled />
          </div>
        </div>
    </>
  );
}

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`	`'选择文件'` / `'未选择文件'`