VueJS 和 Firebase 存储：如何等到图像上传完成后再将 URI 提交到数据库？

Question

我构建了一个评论系统，允许用户在评论中添加图像。我试图等到图像上传完成后再向 firestore 添加评论，但我的尝试不起作用。我有一个名为photoUpload()将图像上传到 firebase 存储的方法。该方法包含一个uploadTask用于获取进度详细信息的侦听器。但是，在图像上传完成之前，我的评论已添加到数据库中。

如何延迟并等到完成后再提交评论？

这是我的代码：

数据功能：

  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

    }

  )

}

Answer 1

您应该进行uploadComplete异步，并返回一个承诺，该承诺仅在上传完成且下载 URL 可用后才解决。由于它的所有工作都是异步的，因此您必须构建一种方法让调用者知道这一点，否则该函数将在任何操作完成之前立即返回。如果您还等待等待 uploadTask （它的作用就像一个承诺）来知道它何时完成，而不是使用回调，那么可能会更容易。