Vue File Picker

Install

1npm install vue-file-picker --save

or

1yarn add vue-file-picker

In your main.js file, add

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

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

Usage

In your component,

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

1export default {
2  data() {
3    return {
4      images: ''
5    }
6  },
7
8  methods: {
9    test() {
10      console.log(this.images);
11    }
12  }
13}

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.