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

Question

I can not use v-model with file input, Vue says I must use v-on:change. Ok so I can use v-on:change, but how can I bind the "content" of the input file to a data property?

Let's say I want to bind it in a component to this.file:

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

Here is the HTML part:

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

How should I do the binding?

Answer 1

In the onchange event you should pass the event object to a function and handle:

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

For more information refer https://codepen.io/Atinux/pen/qOvawK/

Answer 2

Using v-model with a file input makes no sense, because you can't set a value on a file input - so what should a two-way binding do here?

Just use v-on:change