Как сделать мультизагрузку файлов с превью, на примере vue.js?

Question

[semki096]

Вот пример как загрузить файлы с превью. https://codepen.io/Atinux/pen/qOvawK/ Но никак не получается сделать мультизагрузку. Прошу помощи.

Answer 1

[0xD34F]

<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);
    },
  },
});

Comments

[semki096]

Спасибо большое. А не подскажете, что означает троеточие [...files]? Ещё вопрос, как можно рядом с картинкой передать ёё название итд?

[0xD34F]

semki096,

что означает троеточие [...files]?

spread, делаем массив, чтобы можно было перебрать файлы с помощью forEach (которого нет у FileList)

как можно рядом с картинкой передать ёё название итд?

доставайте что там вам надо из объектов файлов - вместо строки в images будет объект; например:

reader.onload = e => this.images.push({
  src: e.target.result,
  name: file.name,
});

<img :src="image.src" />
<div>{{ image.name }}</div>

[alex-1917]

этот упрощенный метод хорош только для изучения, на практике клиент загрузит с десяток парумегабайтных фоток и браузер куку.