vuetify image upload preview

user_8548202 0
Viewed 15571

I am using vuetify with vue.js and I try to preview image before upload

The HTML

<v-file-input
  v-on:change="Preview_image($event)"
></v-file-input>
<img id="Preview_image_create" class="Preview_image">

the Vue.js code

methods: {
    Preview_image(e)
    {
         console.log(e);
         if (e.target.files && e.target.files[0])
         {
          
         }
    },

when choosing an image it gives an error

Cannot read property 'files' of undefined"

logging e gives:

File {name: "148200_4580089360895_1364944205_n.jpg", lastModified: 1374722747086, lastModifiedDate: Thu Jul 25 2013 05:25:47 GMT+0200 (Eastern European Standard Time), webkitRelativePath: "", size: 8506, …}
lastModified: 1374722747086
lastModifiedDate: Thu Jul 25 2013 05:25:47 GMT+0200 (Eastern European Standard Time) {}
name: "148200_4580089360895_1364944205_n.jpg"
size: 8506
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File

so how to preview the image?

vuetify.js vue.js
4 Answers

Template Without using jQuery. I have used v-img tag but you can use img tag as well.

<v-file-input 
   @change="Preview_image"
   v-model="image"
   >
</v-file-input>
<v-img :src="url"></v-img>

Script: event sent automatically no need to send it

  new Vue({
  el: '#app',
  data() {
    return {
      url: null,
      image: null,
    }
  },
  methods: {
    Preview_image() {
      this.url= URL.createObjectURL(this.image)
    }
  }
})
user_111118680

My solution is:

Template:

<v-file-input v-model="image" />
<v-img :src="url" />

Script:

new Vue({
 data() {
    return {
      image: null
    }
  },
  computed: {
    url() {
      if (!this.image) return;
      return URL.createObjectURL(this.image);
    }
  }
})
user_97096460

I've come up with this solution:

Preview_image(e) {
    if (e) {
        $('#image_id').attr('src', URL.createObjectURL(e)); // jQuery selector
    }
},
user_85482020

/multiple files/

<v-file-input @change="vistaPrevia" v-model="image" multiple > 

data: () => ({
             url: [],
      image: null,
})

 methods: {
           vistaPrevia() {
                this.image.forEach(element => {
                   this.url.push({'src':URL.createObjectURL(element)})
                });
            },
}
user_162640890
Related