Vue和FileReader接口:如何等待图片文件上传？

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">上传</button>
    <img :src="imageUrl" v-if="imageUrl">
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      imageUrl: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (this.file) {
        this.readFile(this.file)
          .then((dataUrl) => {
            // 在这里可以进行图片上传的操作，例如调用API发送数据
            // 上传成功后，可以将返回的图片链接赋值给imageUrl，以显示上传的图片
            this.imageUrl = dataUrl;
          })
          .catch((error) => {
            console.error(error);
          });
      }
    },
    readFile(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          resolve(event.target.result);
        };
        reader.onerror = (event) => {
          reject(event.target.error);
        };
        reader.readAsDataURL(file);
      });
    }
  }
};
</script>