如何在Vuetify v-file-input中预填充已上传文件名？

在使用Vuetify的v-file-input组件的编辑页面中，我们已保存用户之前上传的文件名，需要在页面重新打开时，在组件内显示该文件名以提示用户已有文件存在。此前尝试直接将v-model绑定文件名、使用placeholder属性均无效。

方法一：模拟File对象绑定到v-model #

v-file-input的v-model仅接受File或FileList类型的值，因此我们可以根据已保存的文件名创建一个模拟的File对象（无需实际文件内容，仅用于显示）。

实现步骤： #

1. 在组件数据中定义已保存文件名和绑定的文件对象：

data() {
  return {
    existingFileName: "user-id-card.jpg", // 从后端接口获取的已保存文件名
    selectedFile: null
  };
},
mounted() {
  // 页面加载时，若存在已保存文件名则创建模拟File对象
  if (this.existingFileName) {
    const blob = new Blob([], { type: "image/*" });
    blob.name = this.existingFileName;
    this.selectedFile = blob;
  }
}

2. 在模板中绑定v-model：

<!-- ID Upload -->
<v-file-input
  outlined
  dense
  accept="image/*"
  label="Upload ID / Passport (Certified)"
  :rules="[v => !!v || 'ID / Passport is required']"
  v-model="selectedFile"
  @change="onNewFileUpload"
></v-file-input>

这种方法能让组件保持原生的选中状态样式，和用户正常上传文件后的表现一致。

方法二：使用插槽自定义显示内容 #

如果不想模拟File对象，可以利用v-file-input的插槽自定义输入区域的显示内容，同时保留上传选择功能。

自定义输入框内容示例： #

<v-file-input
  outlined
  dense
  accept="image/*"
  label="Upload ID / Passport (Certified)"
  :rules="[v => !!v || 'ID / Passport is required']"
  @change="onNewFileUpload"
>
  <template v-slot:input>
    {{ existingFileName || '选择文件' }}
  </template>
</v-file-input>

前置文件名提示示例： #

<v-file-input
  outlined
  dense
  accept="image/*"
  label="Upload ID / Passport (Certified)"
  :rules="[v => !!v || 'ID / Passport is required']"
  @change="onNewFileUpload"
>
  <template v-slot:prepend-inner v-if="existingFileName">
    <span class="text-sm mr-2">已上传: {{ existingFileName }}</span>
  </template>
</v-file-input>

这种方法自定义程度更高，无需处理File对象，适合只需要提示用户已有文件的场景。

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