Vue 2 + Firebase - 上传到 Firebase 存储后执行功能

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()
    })
}