v-model 不支持输入类型="file"

Question

我不能对文件输入使用 v-model，Vue 说我必须使用 v-on:change。好的，我可以使用 v-on:change，但是如何将输入文件的 "content" 绑定到 data 属性？

假设我想在一个组件中将它绑定到 this.file:

export default {
  data() {
    file: null
  },
  // ...
}

这是 HTML 部分：

<input id="image" v-on:change="???" type="file">
<!--                           ^- don't know how to bind without v-model -->

如何绑定？

Answer 1

对文件输入使用 v-model 没有任何意义，因为您不能在文件输入上设置值 - 那么 two-way 绑定在这里应该做什么？

只需使用v-on:change

Answer 2

在 onchange 事件中，您应该将事件对象传递给函数并处理：

onFileChange(e) {
  var files = e.target.files || e.dataTransfer.files;
  if (!files.length)
    return;
  this.createImage(files[0]);
},

v-model doesn't support input type="file"