Vue. js как загрузить изображение и ПОСЛЕ ТОГО, ЧТОБЫ ВЫПОЛНЯТЬ СПОСОБ

Question

Привет, я новичок в vue js, и я хотел бы спросить вас, как решить эту проблему ...

В основном, у меня есть компонент, где скрытый ввод для файлов. После того, как я нажал кнопку, браузер показал мне окно для импорта файлов из p c ... ПОСЛЕ того, как я выбрал файл, я хотел бы взять этот файл ... проверьте, не является ли это изображением файла, и отобразите это изображение в моем теге img ...

Моя проблема в том, что я действительно не знаю, как заставить код ждать, пока я выберу свой файл. Теперь, если я, например, console.log что-то, это не ждет моей загрузки.

<template>
    <div id="insert-component">
        <div id="insert-new" >
            <h2 class="text-md-left">Nová kategória</h2>
            <div class="mt-2">
                <a href="#" id="img-button" class=" d-flex flex-wrap">
                    <img src="/storage/images/no_image.png" alt="logo">
                    <input type="file" class="d-none" id="load-category-image">
                    <button class="btn btn-dark btn-block" v-on:click="loadImage($event)">Pridať obrázok</button>
                </a>
            </div>
            <div class="form-group mt-2 text-left">
                <label for="name">Názov kategórie:</label>
                <input type="text" name="name" class="form-control">
                <label for="description" class="mt-2">Popis kategórie:</label>
                <textarea name="description" class="form-control" rows="4">
                </textarea>
            </div>
        </div>
        <button class="btn btn-success btn-block my-2" v-on:click="submit($event)">Pridať kategóriu</button>
    </div>
</template>

<script>
    export default {
        name: "InsertComponent",
        data: function () {
            return {
                state: 0
            }
        },
        methods: {
            loadImage($e){
                $e.preventDefault();
                document.getElementById('load-category-image').click();
                console.log("MY PROBLEM IS HERE, code normal continue");
            },
            test(){
                alert('HI');
            }
        },
    }
</script>

Answer 1

Вы можете добавить обратный вызов к input для прослушивания изменений файла.

Сначала отредактируйте html:

<input type="file" class="d-none" id="load-category-image" v-on:change="handleFileSelected">

Затем вы можете обработать то, что происходит с файлами выбранный в вашем компоненте:

    methods: {
        loadImage($e){
            //...
        },
        handleFileSelected(event) {
            const files = document.getElementById('load-category-image').files;
            console.log(files);
        }
    },