VueJS实现多文件名展示时报错push is not a function的问题求解

错误根因 #

你给type="file"的<generic-input>组件绑定了v-model="imagesReturn"，文件输入框的v-model会在选择文件后自动将绑定值覆盖为类数组的FileList对象，你初始化的imagesReturn是数组，一旦选择文件后就被替换为没有push方法的FileList类型，调用push自然会报错。

同时还存在一个渲染逻辑问题：你当前往imagesReturn里push的是文件名字符串，模板里写的{{ image.name }}会取不到值，字符串没有name属性，渲染结果会为空。

修复步骤 #

• 移除文件输入框上的v-model="imagesReturn"绑定，文件选择不需要双向绑定，你已经通过@change事件处理文件读取逻辑，不需要v-model自动覆盖值。
• 修正模板渲染逻辑，直接输出存储的文件名即可，或者调整存储逻辑为存完整File对象。
• 可选优化：change事件最后清空输入框value，避免重复选择同一个文件时不会触发change事件。

修正后完整代码 #

模板部分 #

<div v-for="(image, index) in imagesReturn" :key="index">
  <span>{{ image }}</span>
</div>
<div>
  <generic-input
    type="file"
    multiple
    @change="addFiles"
  >
    add files
  </generic-input>
</div>

JS部分 #

<script>
export default {
  data() {
    return {
      imagesReturn: []
    }
  },
  methods: {
    addFiles(e) {
      const selectedFiles = e.target.files;
      for (let img of selectedFiles) {
        this.imagesReturn.push(img.name);
      }
      // 清空输入框值，支持重复选择同一个文件
      e.target.value = '';
    }
  }
}
</script>

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