亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

VueJS 和 Firebase 存儲:如何等到圖像上傳完成后再將 URI 提交到數據庫?

VueJS 和 Firebase 存儲:如何等到圖像上傳完成后再將 URI 提交到數據庫?

梵蒂岡之花 2023-09-21 17:30:53
我構建了一個評論系統,允許用戶在評論中添加圖像。我試圖等到圖像上傳完成后再向 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    }  )}
查看完整描述

1 回答

?
holdtom

TA貢獻1805條經驗 獲得超10個贊

您應該進行uploadComplete異步,并返回一個承諾,該承諾僅在上傳完成且下載 URL 可用后才解決。由于它的所有工作都是異步的,因此您必須構建一種方法讓調用者知道這一點,否則該函數將在任何操作完成之前立即返回。

如果您還等待等待 uploadTask (它的作用就像一個承諾)來知道它何時完成,而不是使用回調,那么可能會更容易。


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號