[Vuejs]-Vue – how to get a file to a hidden input field

Hi I think the error caused by v-bind:value="{ file } , you should remove it, and it will work:

<input type="file" style="display:none">

You can’t use v-model = "file" to get the file data, and what you have done with this.formData.append('file', files[0]); is the right way to get the data, if you want to get the data in the scope of your components, you can do something like this:

    data() {
      return {
        image: '',
        formData:new FormData(),
        file: null
      }
    },
    methods: {
    onFileChange: function onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
            return;
        this.createImage(files[0]);
        this.formData.append('file', files[0]);
        this.file = files[0];
    }

    ....

reference:

• https://laracasts.com/discuss/channels/vue/vuejs-using-v-model-with-input-typefile?page=1
• http://codepen.io/Atinux/pen/qOvawK/