Vue 2 + Firebase - Firebase Storageにアップロードした後に関数を実行

Question

forループが終了してアップロードが完了した後でコードthis.createListing()を実行したいと思います。 forループの後で実行すると、すべてのアップロードが完了したかどうかは考慮されません。アップロードされたファイルからはdownloadURLが取得されません。

すべてのアップロードが完了したら、この機能を実行したいと考えています。 何か助けていただければ幸いです。ここに私のコードは次のとおりです。

submitForm() { 
    const user = firebase.auth().currentUser 
    const listingPostKey = firebase.database().ref('listings/').push().key 
    const listingRef = firebase.database().ref('listings/' + listingPostKey) 

    for (let i = 0; i < this.uploadedImages.length; i++) { 
     var storageRef = firebase.storage().ref('images/' + user.uid + '/' + this.imageName) 
     var uploadTask = storageRef.put(this.uploadedImages[i]) 

     uploadTask.on('state_changed', (snapshot) => { 
      var progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100 
     }, error => { 
      this.errors.push(error.message) 
     },() => { 
      // Upload complete 
      var downloadURL = uploadTask.snapshot.downloadURL 
      this.images_url.push(downloadURL) 
      this.createListing() 
     }) 
    } 
} 

Answer 1

docsによると：

put()とputString()お約束として使用することができますUploadTaskを返す、またはアップロードのステータスを管理および監視するために使用するの両方。

すべてのアップロードが完了するまで待つには、Promise.allを使用してください。

submitForm() { 
    const user = firebase.auth().currentUser 
    const listingPostKey = firebase.database().ref('listings/').push().key 
    const listingRef = firebase.database().ref('listings/' + listingPostKey) 
    const storageRef = firebase.storage().ref('images/' + user.uid + '/' + this.imageName) 

    // map uploadedImages to array of uploadTasks (promises) 
    const uploads = this.uploadedImages.map(uploadedImage => { 
     const uploadTask = storageRef.put(uploadedImage) 

     // you probably don't need this part 
     // since 'progress' is not used anywhere 
     uploadTask.on('state_changed', snapshot => { 
      var progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100 
     }) 

     return uploadTask.then(snapshot => { 
      this.images_url.push(snapshot.downloadURL) 
     }) 
    }) 

    // wait for all uploadTasks to be done 
    Promise.all(uploads).then(() => { 
     this.createListing() 
    }) 
}