@semki096

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

Вот пример как загрузить файлы с превью. https://codepen.io/Atinux/pen/qOvawK/ Но никак не получается сделать мультизагрузку. Прошу помощи.
  • Вопрос задан
  • 567 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
<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);
    },
  },
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы