---
title: "File 文件"
description: "afz.file() 的单文件与多文件上传配置。"
seo_title: "File Field"
seo_description: "How a Zod file field maps to AutoForm controls — single file upload and multiple file upload via array with type file."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/auto-form/file"
---
# File 文件

> afz.file() 的单文件与多文件上传配置。

> \[\!NOTE\]
> 
> 使用 
> 
> afz.file()
> 
>  创建文件上传字段：

## 单文件上传

基础的单文件上传：

```vue [AutoFormFieldFileSingleExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  avatar: afz.file({
    controlProps: {
      accept: 'image/*'
    }
  })
    .meta({
      label: '单文件上传',
      hint: '仅支持图片格式'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: `文件名: ${event.data.avatar.name}`
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>
```

## 多文件上传

多文件上传，使用 `array` 配合 `type: 'file'`：

```vue [AutoFormFieldFileMultipleExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  attachments: afz.array(afz.file(), {
    type: 'file',
    controlProps: {
      multiple: true,
      layout: 'list'
    }
  })
    .min(1, '至少上传一个文件')
    .max(5, '最多上传 5 个文件')
    .meta({
      label: '多文件上传',
      hint: '最多上传 5 个文件'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: `已上传 ${event.data.attachments.length} 个文件`
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>
```


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.