如何在Vuetify中实现可累加文件的v-file-input组件

我有一个绑定了supportingDocumentsModel的v-file-input组件，已经预先赋值了部分文档。但用户点击选择新文件时，之前的内容会被清空，希望实现累加添加文件，仅通过组件的清除图标清空已选内容。

当前组件代码：

<v-file-input
  v-model="supportingDocumentsModel"
  :show-size="1000"
  color="primary"
  label="Rate Supporting Documents"
  placeholder="Select your supporting documents"
  prepend-inner-icon="mdi-file"
  prepend-icon=""
  variant="outlined"
  counter
  comfortable
  multiple
  clearable
>
  <template v-slot:selection="{ fileNames }">
    <template v-for="(fileName) in fileNames" :key="fileName">
      <v-chip
        class="me-2"
        color="blue-accent-4"
        size="small"
        label
      >
        {{ fileName }}
      </v-chip>
    </template>
  </template>
</v-file-input>

我尝试基于参考实现编写了以下函数，但将模型和持久化模型作为参数传入后无法正常工作：

const updateFiles = (files : File[], persistentFiles : File[]) => {
    //get new files by finding difference between persisted files and latest file selection
    const newFiles = files.filter(file1 => {
      return !persistentFiles.some(file2 => {
        return file1.name === file2.name
      })
    })
    // set new files to persist
    persistentFiles.push(...newFiles)
    // update v-model
    files = persistentFiles
}

function clearFiles(files : File[], persistentFiles : File[]) {
  persistentFiles = []
  files = []
}

问题原因分析 #

1. 响应式数据更新失效：函数参数是原响应式数组的副本，修改files = persistentFiles或persistentFiles = []只是修改了局部变量，不会触发Vue响应式更新。
2. 组件默认行为限制：v-file-input的multiple模式默认是替换已选文件，而非追加，需要手动处理选择事件来实现累加逻辑。

正确实现方案 #

核心思路

• 用两个响应式数组分离逻辑：一个临时存储用户每次新选的文件，一个持久化存储所有已选文件。
• 监听组件的change事件，将新选文件去重后追加到持久化数组。
• 绑定清除按钮事件，直接清空持久化数组。

完整代码示例

模板部分

<v-file-input
  v-model="tempFiles"
  :show-size="1000"
  color="primary"
  label="Rate Supporting Documents"
  placeholder="Select your supporting documents"
  prepend-inner-icon="mdi-file"
  prepend-icon=""
  variant="outlined"
  counter
  comfortable
  multiple
  clearable
  @change="handleFileChange"
  @click:clear="handleClearFiles"
>
  <template v-slot:selection>
    <template v-for="file in persistentFiles" :key="file.name + file.size">
      <v-chip
        class="me-2"
        color="blue-accent-4"
        size="small"
        label
      >
        {{ file.name }}
      </v-chip>
    </template>
  </template>
</v-file-input>

脚本部分（Vue 3 Composition API）

import { ref } from 'vue'

// 临时存储每次新选择的文件（会被组件自动替换）
const tempFiles = ref<File[]>([])
// 持久化存储所有已选文件，可预先赋值初始文档
const persistentFiles = ref<File[]>([/* 你的初始File对象数组 */])

const handleFileChange = () => {
  if (!tempFiles.value.length) return

  // 严谨去重：结合文件名、大小、修改时间判断，避免同名不同文件被误判
  const newFiles = tempFiles.value.filter(newFile => {
    return !persistentFiles.value.some(existFile => 
      existFile.name === newFile.name &&
      existFile.size === newFile.size &&
      existFile.lastModified === newFile.lastModified
    )
  })

  // 追加新文件到持久化数组，触发响应式更新
  persistentFiles.value.push(...newFiles)
  
  // 清空临时数组，不影响下次选择
  tempFiles.value = []
}

const handleClearFiles = () => {
  // 直接清空持久化数组，触发响应式更新
  persistentFiles.value = []
}

关键说明 #

• 选择插槽直接基于persistentFiles渲染，确保展示的是所有已累加的文件。
• 去重逻辑采用多维度判断，比单一文件名判断更严谨，适合处理同名不同文件的场景。
• 通过@click:clear事件绑定清空逻辑，确保只有组件的清除图标能触发清空操作。

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