Preview an image before it is uploaded VUEjs

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

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } } — omiz, Mar 05 '18 at 09:08

score 225 · Accepted Answer · answered Mar 05 '18 at 09:25

225

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>

answered Mar 05 '18 at 09:25

wafs

2,836
2
17
12

1

I know these codes can works but can you briefly explain a little bit? like the things inside the `method`. Thx – Choy Aug 30 '19 at 02:29
3

@Choy The `onFileChange` method takes in an event as the argument, which is triggered by the input whenever a file is changed The `input type=file` specifically has a `files` attribute which is the list of files it currently holds. This is a single file input which is why I am limiting it to the first element `0`. If no file is there it'll return undefined which clears the image, otherwise it'll point to the user's image. After that, I used `URL.createObjectURL()` which is native to browsers, to create an Object URL for this local file, which I then use as the `src` attribute for the image. – wafs Aug 30 '19 at 03:59
1

– Aug 05 '20 at 00:00
2

Right after the `this.url = URL.createObjectURL(file);` line, add this to clear out the browser memory to prevent memory leaks: `URL.revokeObjectURL(file)` – redshift Jul 23 '21 at 10:37
does this work on as well? – Rheza001 Jul 29 '21 at 15:32
1

Awesome solution. Adding to @redshift point on `URL.revokeObjectURL(file)` . Straight from the docs, "Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so." Source https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#usage_notes – Alphy Gacheru Sep 24 '22 at 16:47

Preview an image before it is uploaded VUEjs

1 Answers1

Linked