如何在将图片上传到Vue.js之前显示图片？

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <img :src="previewImage" v-if="previewImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewImage: '', // 用于显示图片预览的Base64编码字符串
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = () => {
        this.previewImage = reader.result;
      };

      reader.readAsDataURL(file);
    },
  },
};
</script>