File
File 字段类型的使用方法和配置选项
基础用法
使用 afz.file() 创建文件上传字段：
单文件上传
基础的单文件上传：
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod/v4'
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'：
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod/v4'
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>