Javascript VueJS和Firebase存储：如何在将URI提交到数据库之前等待图像上传完成？

我建立了一个评论系统，允许用户在评论中添加图像。 我试图等到图像上传完成后再向firestore添加评论，但我的尝试无效。我有一个名为

photoUpload（）

的方法将图像上载到firebase存储。该方法包含一个

uploadTask

侦听器，用于获取进度详细信息。但是，我的评论是在上传图像之前添加到数据库中的

在提交评论之前，如何延迟并等待它完成

这是我的密码：

数据功能：

以下是我的图像上传任务：

要向firestore添加注释，我运行以下方法：

async addComment（）{
this.overlyshow=true
if（this.hasImage）{
this.photoUpload（）//您应该使
uploadComplete
异步，并返回一个承诺，该承诺只有在上载完成且下载URL可用后才能解析。由于它的所有工作都是异步的，因此您必须建立一种方式让调用方知道这一点，否则函数将在任何事情完成之前立即返回

如果您也在等待等待上载任务（它就像一个承诺）来知道它何时完成，而不是使用回调，可能会更容易。
好的，我将不得不研究这个…非常复杂，但我会慢慢地但肯定地看看我是否能做到这一点…工作正常了吗，tanks
  data() {
    return {
      text: '',
      image: null,
      overlayShow: false,
      progress: 0,
      downloadUrl: null
    }
  },

photoUpload() {
  this.filename = uuidv4()
  const storageRef = this.$fireStorage.ref()
  this.photoRef = storageRef.child(
    `photos/${this.userProfile.uid}/commentPhotos/${this.filename}`
  )
  // uploads string data to this reference's location
  const uploadTask = this.photoRef.putString(this.image, 'data_url')

  // set the callbacks for each event
  const next = (uploadTaskSnapshot) => {
    this.progress =
      (uploadTaskSnapshot.bytesTransferred /
        uploadTaskSnapshot.totalBytes) *
      100
    console.log('Upload is ' + this.progress + '% done')
  }
  const error = (error) => {
    ...snijp...
  }
const complete = async () => {
    // Upload completed successfully, now we can get the download URL
    this.downloadUrl = await uploadTask.snapshot.ref.getDownloadURL()
  }
  // listens for events on this task
  uploadTask.on(
    // 3 callbacks available for each event
    this.$fireStorageObj.TaskEvent.STATE_CHANGED,
    {
      next,
      error,
      complete
    }
  )
}

async addComment() {
  this.overlayShow = true
  if (this.hasImage) {
    this.photoUpload() // <---------I need to wait on this to finish!
  }
  try {
    console.log(this.downloadUrl) //<-----this is returning null even after image is uploaded
    // create comment
    const docRef = this.$fireStore.collection('comments').doc()
    await docRef.set({
      createdAt: this.$fireStoreObj.FieldValue.serverTimestamp(),
      id: docRef.id,
      content: this.text,
      attachment: this.downloadUrl, //<---- because photo upload is not finished, this gets null
    })
    console.log('comment added!')
    // update comment count on photo doc
    await this.$fireStore
      .collection('photos')
      .doc(this.photo.id)
      .set(
        {
          comments: this.$fireStoreObj.FieldValue.increment(1)
        },
        { merge: true }
      )
    this.text = ''
    this.downloadUrl = null
    this.clearImage()
    this.overlayShow = false
  } catch (error) {
    console.error('Error adding new comment', error)
  }
}