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 -->

我该如何进行绑定操作？

- rap-2-h

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/

- Arun Ghosh

---

“this.createImage(files[0]);”是一个不包含在上述片段中的不同方法，但是Codepen链接中有它。我认为如果你也能在这里添加它，那就更好了，因为Codepen链接可能会过期，但答案仍然存在。” - Towkir

在服务器端使用"data:image/png;base64"纯文本值创建图像是一个好的实践吗？ - Axel Briche

Answer 2

在文件输入框中使用 v-model 没有意义，因为你无法给文件输入框设置一个值 - 那么双向绑定在这里应该做什么呢？

只需使用 v-on:change 即可。

- Linus Borg

---

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

当我上传相同的文件两次时，@change无法正确地表现出来（它不认为有任何“更改”），因此将一个值设置为null在重置输入方面是有意义的。 - Joey Carlisle