laravel - lokale Bildvorschau von vuejs, wie erhalte ich die Bild-Quelle?

Question

Vuejs lokale Bildvorschau, wie erhalte ich die Bildquelle?

KomponentenImagePreview.vue

<template>
    <p class="card text-center" style="width: 16rem;">
        <img class="card-img" :src="imgDataUrl" style="height: 16rem;">
        <p class="card-footer text-muted">
            <input type="file" id="image" name="image" @change="preview($event)">
        </p>
    </p>
</template>

<script>
    export default {
        data(){
            return {
                imgDataUrl: ''
            }
        },
        methods: {
            preview(event){
                this.imgDataUrl = event.target.files;
            }
        }
    }
</script>

Frage:
Nach dem Klicken auf ein Bild kann das Bild nicht angezeigt werden. Es wird im Debugging-Fenster des Browsers angezeigt. src="[object File]" Wie soll ich es schreiben?
Die folgenden beiden Schreibweisen in der Vorschaumethode funktionieren nicht.

event.target.files
event.target.files[0]

Answer 1

event.target.value这个是src

Answer 2

console.log(event.target.files) 看看结构是怎样的