v-model不支持input type =“file”

Question

我不能将v-model用于文件输入，Vue说我必须使用v-on:change。好的，我可以使用v-on:change，但是如何将输入文件的“内容”绑定到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

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

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

有关更多信息，请参阅https://codepen.io/Atinux/pen/qOvawK/

Answer 2

将v-model与文件输入一起使用是没有意义的，因为您无法在文件输入上设置值 - 那么双向绑定应该在这里做什么？

只需使用v-on:change

即可