使用vuetify "<v-file-input>“在上传之前预览图像？

<template>
  <v-file-input
    v-model="file"
    label="选择文件"
    accept="image/*"
    @change="previewImage"
  ></v-file-input>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      previewUrl: null
    };
  },
  methods: {
    previewImage() {
      if (this.file) {
        const reader = new FileReader();
        reader.onload = e => {
          this.previewUrl = e.target.result;
        };
        reader.readAsDataURL(this.file);
      } else {
        this.previewUrl = null;
      }
    }
  }
};
</script>

<template>
  <div>
    <v-file-input
      v-model="file"
      label="选择文件"
      accept="image/*"
      @change="previewImage"
    ></v-file-input>
    <img v-if="previewUrl" :src="previewUrl" alt="预览图像" />
  </div>
</template>