vue-image-input

Vue File Picker

Install

npm install vue-file-picker --save

or

yarn add vue-file-picker

In your main.js file, add

import VueFilePicker from 'vue-file-picker'
Vue.use(VueFilePicker)

This will register the <vue-file-picker /> component.

Usage

In your component,

<form @submit="submit">
  <div class="form-group">
    <label>File</label>
    <vue-file-picker v-model="image" :multiple="true" @change="test" />
  </div>
</form>

export default {
  data() {
    return {
      images: ''
    }
  },

  methods: {
    test() {
      console.log(this.images);
    }
  }
}

This renders

and upon file selection

and the console.log(this.images) results in an array cotaining the 2 images selected as file objects. For multiple="false" or single file input, the result is the single object that is the file. Therefore, the data is ready to be multipart/form-data encoded and sent to a server, no further procesing required.