vuetify 图片上传预览

Question

我在 vue.js 中使用 vuetify，我尝试在上传前预览图像

HTML

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

Vue.js 代码

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

选择图像时会出错

无法读取未定义的属性“文件””

日志记录e给出：

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

那么如何预览图像呢？

Answer 1

不使用 jQuery 的模板。我使用过v-img标签，但你也可以使用img标签。

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

脚本：事件自动发送无需发送

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

Answer 2

我的解决方案是：

模板：

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

脚本：

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

Answer 3

我想出了这个解决方案：

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