Vue.js如何在更新前显示图像预览

Question

我有我正在加载图像的自定义组件。我需要在选择图像之后和将其上传到服务器之前显示该图像。请问这个怎么做？我尝试对 img 标签使用 v-on:change 效果，但它不起作用。我的计划是使用 test() 函数来进行图像预览。

<template>

    <div id="insert-component">

        <div id="insert-new" >

            <h2 class="text-md-left">New Category</h2>

            <div class="mt-2 text-left">

                <a href="#" id="img-button" class=" d-flex flex-wrap" v-on:click.stop="loadImage()">

                    <img src="/storage/images/no_image.png" alt="logo" v:on-change="test()">

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

                    <button class="btn btn-dark btn-block" >Pridať obrázok</button>

                </a>

                <small class="text-danger d-none error">Súbor musí byť png, jpg alebo jpeg</small>

            </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",

        props: [ 'updateTableData' ],

        data: function () {

            return {

                category_name: "",

                category_description: "",

                category_img:"/storage/images/no_image.png",

                file:null

            }

        },

        methods: {

            test(){

              alert("test");

            },

            loadImage(){

                document.getElementById('load-category-image').click();

            },

            handleFileSelected(event) {

                const acceptedImageTypes = ['image/jpg', 'image/jpeg', 'image/png'];

                let loadedFile = document.getElementById('load-category-image').files;

                if(acceptedImageTypes.includes(loadedFile[0]['type']))

                {

                    this.category_img="/storage/images/"+loadedFile.name;

                    this.file=loadedFile;

                }

            },

        },

    }

</script>

Answer 1

您可以使用URL.createObjectURL(files[0])生成网址。codepen -&nbsp;https://codepen.io/anon/pen/XGYoyr