使用方法

FileInput 用来选择一个或一组文件。值是 File；打开 isMultiple 后是 File[]；没有选择时是 null。

<script setup lang="ts">
import { FileInput } from '@astryx-vue/core/FileInput'
import { shallowRef } from 'vue'

const resume = shallowRef<File | File[] | null>(null)
</script>

<template>
  <FileInput v-model="resume" label="简历" accept=".pdf,.docx" />
</template>

mode="input" 是紧凑的输入框。mode="dropzone" 是虚线区域，也可以把文件拖进去。不符合 accept、maxSize 或 maxFiles 的文件不会进入值，字段会显示错误。占位符、清除按钮和错误文案跟随 provideAstryxLocale。

解剖

部分	说明
标签	标识字段的文字。即使视觉上隐藏，为了无障碍也始终渲染。
说明	标签和投放区之间的辅助文字，说明接受的格式或大小限制。
投放区	点击即可选择文件的区域。投放区模式下也接受拖进来的文件。
上传图标	投放区里暗示上传的托盘图标。
占位	还没选文件时的提示文字。
文件名	显示已选文件的名字。
清除按钮	去掉已选文件，并把焦点交回输入的关闭按钮。
转圈	异步上传时出现的加载指示。
状态消息	带错误、警告或成功和一条消息的校验反馈。

最佳实践

指引	实践
推荐	用 label 说明这个字段要什么，用 description 写清接受的类型。
推荐	用字节数设置 maxSize，超大的文件在上传前就被拒绝。
避免	一份必填文档却用拖放区。人们这时更期待一个普通输入框。

示例

基本用法

Resume

PDF or Word document, up to 5 MB

简历字段，接受不超过 5 MB 的 PDF 或 Word 文档。