Vue中文件类型input在v-model不适用场景下如何设置默认值

由于浏览器的安全策略限制，你无法直接通过JavaScript为<input type="file">设置默认文件值，该限制是浏览器为了避免恶意网站未经用户允许窃取本地文件而设计的，没有绕过方案。

你已经获取到默认文件名的前提下，可以通过隐藏原生输入框、自定义展示层的方式满足用户感知层面的「默认值展示」需求，配合表单提交逻辑兼容原有附件复用的能力，具体实现如下：

实现逻辑 #

• 隐藏原生的file类型input，通过自定义按钮触发原生input的选择行为
• 单独用响应式变量存储默认文件名，直接展示给用户
• 表单提交时做兼容判断：如果用户未选择新文件，告知后端复用原有附件即可；如果用户选择了新文件，再上传新的文件对象

代码示例（Vue3） #

<template>
  <div class="file-upload">
    <input 
      ref="fileInputRef"
      type="file"
      style="display: none"
      @change="handleFileSelect"
    >
    <button @click="openFileSelector">更换文件</button>
    <span class="file-name">{{ currentFileName }}</span>
  </div>
</template>

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

const fileInputRef = ref(null)
// 替换为你从接口/其他渠道获取的默认文件名
const currentFileName = ref('已上传的合同.pdf')
// 存储用户新选择的文件对象
const newSelectedFile = ref(null)

// 触发原生文件选择器
const openFileSelector = () => {
  fileInputRef.value.click()
}

// 处理用户选择文件的逻辑
const handleFileSelect = (e) => {
  const file = e.target.files?.[0]
  if (file) {
    newSelectedFile.value = file
    currentFileName.value = file.name
  }
}

// 表单提交逻辑
const submitForm = async () => {
  const formData = new FormData()
  // 仅当用户选择了新文件时才上传文件字段
  if (newSelectedFile.value) {
    formData.append('attachment', newSelectedFile.value)
  }
  // 追加其他表单字段
  formData.append('title', '表单标题')
  // 调用提交接口即可，后端判断如果没有传attachment字段就复用原有附件
}
</script>

• 所有宣称可以直接为file input赋值的方案都不符合浏览器安全规范，无法在生产环境生效
• 如果是同页面未刷新的场景，你可以把用户之前选择过的File对象存在变量中，提交时直接使用该变量即可，不需要赋值回input

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