SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Список вопросов Печать

Предпросмотр изображений с помощью Vue


Метки: vue.js javascript 

Ответы

RemiZOffAlex  Создано: 2018-04-05 23:36:06.385116  Обновлено: 2018-04-05 23:36:06.385116
<section id="app">
<form method="post" action="/image/add" enctype="multipart/form-data">

<div class="form-group">
    <input type='file' multiple @change="previewImages" id="newfiles" name="newfiles[]" class="form-control" accept="image/*" />
</div>

<div class="row">
    <div class="col py-2">
        <button class="btn btn-outline-success float-right">Загрузить</button>
    </div>
</div>
</form>

<div class="row">
<div class="col-md-6 py-2 border" v-for="(image, index) in imagesData">
<img class="img-thumbnail" :src="image" v-if="image.length > 0">
</div>
</div>
</section>

Скрипт

<script>
new Vue({
    el: '#app',
    data: {
        imagesData: []
    },
    methods: {
        previewImages: function(event) {
            this.imagesData = [];
            var pictures = event.target.files;
            for (var i = 0; i < pictures.length; i++) {
                var reader = new FileReader();
                reader.onload = (e) => {
                    this.imagesData.push(e.target.result);
                }
                reader.readAsDataURL(pictures[i]);
            }
        }
    }
});
</script>

Возможно будут интересны и другие вопросы