Vue.js vuetify图像上载预览

我正在将vuetify与vue.js一起使用，并尝试在上传前预览图像

HTML

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

选择图像时会出现错误

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

日志

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

---

那么如何预览图像呢？

我想出了这个解决方案：

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

---

不使用jQuery的模板。我使用了

v-img

标记，但您也可以使用

img

标记

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

我的解决办法是：

模板：

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

/多个文件/

---

确保

e.target

defined@admcfajn我不明白，（e）来自（$event）是的，但e&$event可能不是每次代码发生时都会出现：）现在输出表达式不可用。关于如何解决此问题的任何更新？这在上一个Vuetify版本中对我有效

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

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

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

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