文件上传

v-file-input 组件是一个特殊的表单，它为选择文件，展示选中文件，展示上传进度提供了美观的界面，旨在取代标准的文件上传表单。

用例

组件 v-file-input 的核心是一个普通的基于 v-text-field 的容器

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

多选

使用 multiple 属性时，v-file-input 可以同时包含多个文件。

template

<template>
  <v-file-input multiple label="File input"></v-file-input>
</template>

格式限制

组件 v-file-input 可以仅接受特殊的你想要的媒体或文件格式。想要获取更多信息，请查看 accept attribute 的文档

template

<template>
  <v-file-input accept="image/*" label="File input"></v-file-input>
</template>

带有纸片

选中的文件可以以 chip 的形式展示 。当带有 chips 和 multiple 参数时，每一个标签将显示（相对于文件计数）。

template

<template>
  <div>
    <v-file-input chips multiple label="File input w/ chips"></v-file-input>
    <v-file-input small-chips multiple label="File input w/ small chips"></v-file-input>
  </div>
</template>

显示的大小

所选文件的显示的大小可以使用 show-size 属性进行配置。 显示的大小可以是 1024 （提供 true 时使用的默认值） 或 _1000_。

template

<template>
  <v-file-input show-size label="File input"></v-file-input>
</template>

计数器

当使用 show-size 属性和 counter 时，将在输入下显示文件的总数和大小。

template

<template>
  <v-file-input show-size counter multiple label="File input"></v-file-input>
</template>

Blog Free

A simple template that features a clean interface for creating a blog or blog-like application.

ads by Vuetify

](https://blog-free.johnleider.com?ref=vuetifyjs.com)

自定义图标

v-file-input 有一个默认的预设图标，可以在组件上设置或全局调整。 关于不断变化的全局组件的更多信息可在 customizing icons page。

template

<template>
  <v-file-input
    label="File input"
    filled
    prepend-icon="mdi-camera"
  ></v-file-input>
</template>

密集

您可以使用 dense 属性降低文件输入高度。

template

<template>
  <v-file-input label="File input" outlined dense></v-file-input>
</template>

选择插槽

使用 selection 插槽，您可以自定义输入选择的外观。 通常使用 chips 完成此操作，但是可以使用任何组件或标记。

template script

<template>
  <v-file-input
    v-model="files"
    placeholder="Upload your documents"
    label="File input"
    multiple
    prepend-icon="mdi-paperclip"
  >
    <template v-slot:selection="{ text }">
      <v-chip
        small
        label
        color="primary"
      >
        {{ text }}
      </v-chip>
    </template>
  </v-file-input>
</template>

<script>
  export default {
    data: () => ({
      files: [],
    }),
  }
</script>

验证

与其他输入类似，您可以使用 rules 属性来创建您自己的自定义验证参数。

template script

<template>
  <v-file-input
    :rules="rules"
    accept="image/png, image/jpeg, image/bmp"
    placeholder="Pick an avatar"
    prepend-icon="mdi-camera"
    label="Avatar"
  ></v-file-input>
</template>

<script>
  export default {
    data: () => ({
      rules: [
        value => !value || value.size < 2000000 || 'Avatar size should be less than 2 MB!',
      ],
    }),
  }
</script>

复杂选择插槽

选择插槽的灵活性使您可以适应复杂的用例。 在此示例中，我们将前两个选择显示为筹码，同时为剩余金额添加数字指示符。

template script

<template>
  <v-file-input
    v-model="files"
    color="deep-purple accent-4"
    counter
    label="File input"
    multiple
    placeholder="Select your files"
    prepend-icon="mdi-paperclip"
    outlined
    :show-size="1000"
  >
    <template v-slot:selection="{ index, text }">
      <v-chip
        v-if="index < 2"
        color="deep-purple accent-4"
        dark
        label
        small
      >
        {{ text }}
      </v-chip>
      <span
        v-else-if="index === 2"
        class="overline grey--text text--darken-3 mx-2"
      >
        +{{ files.length - 2 }} File(s)
      </span>
    </template>
  </v-file-input>
</template>

<script>
  export default {
    data: () => ({
      files: [],
    }),
  }
</script>