How to multi-upload files with previews, using vue.js as an example?

Question

Vue.js

Here is an example of how to download preview files. https://codepen.io/Atinux/pen/qOvawK/ But I can't do multiboot. Please help.

Answer 1

<div id="app">
  <div v-if="!images.length">
    <h2>Select an images</h2>
    <input type="file" @change="onFileChange" multiple>
  </div>
  <div v-else>
    <div v-for="(image, i) in images">
      <img :src="image" />
      <button @click="removeImage(i)">Remove image</button>
    </div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    images: [],
  },
  methods: {
    onFileChange(e) {
      this.createImages(e.target.files || e.dataTransfer.files);
    },
    createImages(files) {
      [...files].forEach(file => {
        const reader = new FileReader();
        reader.onload = e => this.images.push(e.target.result);
        reader.readAsDataURL(file);
      });
    },
    removeImage(index) {
      this.images.splice(index, 1);
    },
  },
});