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]);
},

`this.createImage(files[0]);` 是一个不同的方法，它没有包含在上面的 sinppet 中，但是 codepen 链接有它。我认为如果您也可以在这里添加，codepen 链接可能会过期，但答案会保留，那就更好了。 (12认同)

Answer 2

使用v-model文件输入是没有意义的,因为你不能在文件输入上设置一个值 - 那么双向绑定应该在这里做什么？

只是用 v-on:change

直接在输入标签上，我同意，但在一个旨在以通用方式处理文件上传的组件中，想要包含自定义 v-model 模式是非常正常的。（我知道问题实际上是关于 type="file" 但我认为更好的答案是：进行自定义输入） (4认同)