Vorschau eines Bildes, bevor es in VUEjs hochgeladen wird [duplicate]

Ich weiß, diese Frage wurde gestellt. Aber ich habe keine Ahnung, wie man den Code in vuejs verwendet. Ich habe viel versucht, aber ohne Ergebnisse. Ich habe auch meinen Code hinzugefügt. Kann mir bitte einer helfen? Das ist mein Code. Vielen Dank

html

<template>
<div class="fileUpload">
    <b-container fluid>

        <h4>Image Overview</h4>
        <b-button @click="$refs.fileInput.click()" class="btn-right">Select an image</b-button>

        <b-table @row-clicked="viewImage" striped hover :items="images" :fields="image_fields"></b-table>

        <input style="display: none" ref="fileInput" type="file" @change="fileSelected" enctype="multipart/form-data">
        <b-button variant="success" class="btn-right" @click="uploadImage" method="post">Upload image</b-button>


    </b-container>
</div>

js

<script>
export default {
    name: 'listImage',
    data() {
        return {
            selectedFile: null,
            images: [],
            image_fields: ['id', 'name'],
            total_images: 1               
        }
    },
    methods: {
        fileSelected(evt) {
            evt.preventDefault()
            console.log(evt);
            this.selectedFile = evt.target.files[0]
        },
        uploadImage() {
            var data = new FormData();
            data.append('image', this.selectedFile, this.selectedFile.data)
            var token = sessionStorage.getItem('token')
            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            window.API.post('https://110.10.56.10:8000/images/?token=' + token, data, config)
                .then(response => this.$router.push('/listImage'))
                .catch((error) => {
                    console.log(JSON.stringify(error))
                })
        }
    }
}

Bitte beachten Sie, dass ein Browser nicht alle Bildtypen anzeigen kann (zB: ein TIFF funktioniert mit dieser Methode nicht).

Es gibt ein paar Schritte:

• Habe eine Dateieingabe mit a @change Hörer
• Im onChange, Sie erstellen eine Objekt-URL
• Verwenden Sie diese URL, um das Bild anzuzeigen

const vm = new Vue({
  el: '#app',
  data() {
    return {
      url: null,
    }
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0];
      this.url = URL.createObjectURL(file);
    }
  }
})

body {
  background-color: #e2e2e2;
}

#app {
  padding: 20px;
}

#preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

#preview img {
  max-width: 100%;
  max-height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="file" @change="onFileChange" />

  <div id="preview">
    <img v-if="url" :src="url" />
  </div>
</div>