如何实现v-file-input仅接收含指定关键词的.xlsx文件？

现有如下Vuetify的v-file-input组件代码：

<v-file-input
  class="mx-6"
  show-size
  accept=".xlsx"
  label="File input"
  @change="selectFile"
></v-file-input>

需要实现仅接收文件名包含george关键词的.xlsx文件，例如name-george.xlsx、george-surname.xlsx可通过校验，name-anna.xlsx不可通过，请问该如何实现？

可以通过在@change事件的处理函数中添加文件名校验逻辑，结合组件重置和用户提示来实现需求，具体步骤如下：

1. 核心校验逻辑实现 #

在组件的selectFile方法中，获取选中的文件对象，提取文件名后判断是否符合要求，同时做双重后缀校验（虽然accept已限制，但前端校验更稳妥）。

示例代码：

<template>
  <v-file-input
    class="mx-6"
    show-size
    accept=".xlsx"
    label="File input"
    @change="selectFile"
    ref="fileInput" <!-- 添加ref用于重置组件 -->
  ></v-file-input>
</template>

<script setup>
import { ref } from 'vue'

const fileInput = ref(null)

const selectFile = (file) => {
  if (!file) return
  
  const fileName = file.name
  // 校验规则：文件名包含george（忽略大小写）+ 后缀为xlsx
  const isValid = fileName.toLowerCase().includes('george') && fileName.endsWith('.xlsx')
  
  if (isValid) {
    // 校验通过，执行后续逻辑（比如文件上传、解析）
    console.log('文件符合要求：', fileName)
  } else {
    // 校验不通过，重置组件并提示用户
    fileInput.value.reset()
    alert('请选择文件名包含"george"的.xlsx文件')
  }
}
</script>

2. 优化提示与细节调整 #

• 如果需要严格区分大小写，去掉toLowerCase()即可，只校验小写的george
• 可以把alert替换成Vuetify的v-snackbar组件，让提示更贴合项目UI：

<!-- 在template中添加snackbar -->
<v-snackbar v-model="snackbar" timeout="3000">
  请选择文件名包含"george"的.xlsx文件
  <template v-slot:action="{ attrs }">
    <v-btn text v-bind="attrs" @click="snackbar = false">
      关闭
    </v-btn>
  </template>
</v-snackbar>

<script setup>
const snackbar = ref(false)

// 替换之前的alert
// alert(...)
snackbar.value = true
</script>

3. 可选：文件选择弹窗过滤（浏览器兼容有限） #

部分浏览器支持自定义文件过滤规则，可以在组件中添加filters属性，让弹窗默认只显示符合要求的文件，但注意这不是所有浏览器都支持，建议仅作为辅助：

<v-file-input
  class="mx-6"
  show-size
  accept=".xlsx"
  label="File input"
  @change="selectFile"
  ref="fileInput"
  :filters="[
    {
      name: 'George Excel Files',
      extensions: ['xlsx'],
      fn: (item) => item.name.toLowerCase().includes('george')
    }
  ]"
></v-file-input>

内容的提问来源于stack exchange，提问作者takis Paras