Preview an image before it is uploaded VUEjs [duplicate]

Question

I know this question has been asked. But I have no idea how to use the code in vuejs. I tried a lot but without any results. I also added my code. Can some one please help me? This is my code. Thanks

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))                 })         }     } } 

Answer 1

Please keep in mind that a browser cannot display all image types, (eg: a tiff won't work with this method).

There's a few steps:

• Have a file input with a @change listener
• In the onChange, you create an object URL
• Use this URL to display the image

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>