vue.js 中更改的文件输入

Question

使用纯 HTML/JS，可以查看输入元素的选定文件的 JavaScript 文件对象，如下所示：

 <input type="file" id="input" multiple onchange="handleFiles(this.files)">

但是，当将其转换为“Vue”方式时，它似乎无法按预期工作，只是返回 undefined 而不是返回文件对象数组。

这是它在我的 Vue 模板中的外观：

 <input type="file" id="file" class="custom-file-input"
  v-on:change="previewFiles(this.files)" multiple>

其中 previewFiles 函数如下（位于方法中）：

   methods: {
    previewFiles: function(files) {
      console.log(files)
    }
  }

有替代/正确的方法吗？谢谢

原文由 Ash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

另一种解决方案：

 <input type="file" @change="previewFiles" multiple>

methods: {
   previewFiles(event) {
      console.log(event.target.files);
   }
}

原文由 oboshto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试这个。

 <input type="file" id="file" ref="myFiles" class="custom-file-input"
  @change="previewFiles" multiple>

并在您的组件选项中：

 data() {
  return {
    files: [],
  }
},
methods: {
  previewFiles() {
    this.files = this.$refs.myFiles.files
  }
}

原文由 Ikbel 发布，翻译遵循 CC BY-SA 3.0 许可协议