v-model 不支持输入类型=“文件”答案

【问题标题】：v-model doesn't support input type="file"v-model 不支持输入类型=“文件”
【发布时间】：2017-01-23 09:33:42
【问题描述】：

我不能在文件输入中使用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 -->

我应该如何绑定？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

this.createImage(files[0]); 是一种不同的方法，不包含在上面的 sinppet 中，但 codepen 链接有它。我认为如果您也可以在此处添加它会更好，codepen 链接可能会过期，但答案会保留。
使用“data:image/png;base64”纯文本值在服务器端创建图像是一个好习惯吗？

【解决方案2】：

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

只需使用v-on:change

【讨论】：

直接在输入标签上，我同意，但在一个旨在以通用方式处理文件上传的组件中，想要包含自定义 v-model 模式是非常正常的。（我知道问题实际上是关于 type="file" 但我认为更好的答案是：进行自定义输入）
当我两次上传同一个文件时，@change 的行为不正确（它认为没有任何东西“改变”），因此将值设置为 null 以重置输入是有意义的.