SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы
Список вопросов ПечатьМетки: 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>
|