Vuejs2 Vue和FileReader API：如何在上载之前等待图像文件？

我正在尝试使用FileReader（）API，但很难理解如何等待它完成，以便访问数据URL并将其上载到云存储

让我解释一下：

我有以下模板：

      <input
        id="my-file-input"
        type="file"
        accept="image/*"
        @change="fileChangeHandler"
      />
     <img src="photo" />

脚本：

    fileChangeHandler(e) {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.photo = e.target.result
      }
      reader.readAsDataURL(e.target.files[0])
      console.log(this.photo)
      
      const file = this.photo
      // convert photo file name to hash
      const photoName = uuidv4()
      const storageRef = this.$fireStorage.ref()
      const photoRef = storageRef.child(
        `photos/${this.userProfile.uid}/${photoName}/${photoName}.jpg`
      )
      const uploadTask = photoRef.putString(file, 'data_url') <--- image not ready yet, thus get console error

fileChangeHandler（e）{
const reader=new FileReader（）
reader.onload=（e）=>{
this.photo=e.target.result
}
reader.readAsDataURL（e.target.files[0]）
console.log（这张照片）
const file=this.photo
//将照片文件名转换为哈希
常量photoName=uuidv4（）
const storageRef=this.$firestorestorage.ref（）
const photoRef=storageRef.child(
`照片/${this.userProfile.uid}/${photoName}/${photoName}.jpg`
)
const uploadTask=photoRef.putString（文件'data_url'）您可以使用
承诺，然后使用
异步等待
，如下所示：

异步fileChangeHandler（e）{
this.photo=等待新的承诺（resolve=>{
const reader=new FileReader（）
reader.onload=（e）=>{
解决（如目标、结果）
}
});
//代码的其余部分
}
我会再打给你的。谢谢！