如何为type="file"的input绑定数据并回显文件名及实现文件替换？

原生的type="file"输入框出于浏览器安全限制，不能通过:value直接赋值，所以没法直接用它回显已有的文件名。得换个思路，把文件名显示和文件选择控件分开处理：

实现步骤 #

• 回显文件名：用单独的文本元素（比如<span>）展示从API获取的文件名，file input只负责选择新文件。
• 处理文件更换：给file input绑定change事件，选中新文件后更新对应item的文件名和文件对象，方便后续提交。

修改后的代码示例 #

<tr v-for="item in this.$store.state.allItems" :key="item.id">
  <td><input type="text" v-model="item.name"></td>
  <td>
    <!-- 显示当前文件名（截取路径最后一段作为文件名） -->
    <span>{{ item.src.split('/').pop() }}</span>
    <!-- 文件选择控件 -->
    <input type="file" @change="handleFileChange($event, item)">
  </td>
</tr>

在组件的methods中添加处理函数：

methods: {
  handleFileChange(event, item) {
    const file = event.target.files[0]
    if (file) {
      // 更新显示的文件名（用文件原始名称）
      item.src = file.name
      // 保存文件对象，后续上传时使用
      item.file = file
    }
  }
}

提交时的处理逻辑 #

提交数据到服务器时，区分两种情况：

• 如果item存在file对象（用户选择了新文件），就用FormData封装文件上传；
• 如果没有file对象，就沿用原来的item.src（比如服务器上的文件路径）。

示例提交代码：

submitItems() {
  const formData = new FormData()
  this.$store.state.allItems.forEach(item => {
    formData.append('name', item.name)
    if (item.file) {
      formData.append('file', item.file)
    } else {
      formData.append('existingFile', item.src)
    }
  })
  // 调用API提交formData
}

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