如何将图像上传到 Firebase 存储并等待 URL 返回后再继续

Question

我正在尝试创建一个“创建帖子”表单，用户可以在其中输入文本以及输入图像。

uploadImages() {
    const files = document.querySelector('#imagesInput').files;
    files.forEach(image => {
        console.log("uploading", image.name)
        const name = (+new Date()) + '-' + image.name;
        const task = fb.storage.child(name).put(image, {contentType: image.type});
        task.then(snapshot => {
            snapshot.ref.getDownloadURL().then(url => {
                console.log(url);
            })
        })
    });
}

图像上传过程需要首先发生，并且我需要在数据库中创建帖子之前返回所有 URL（作为数组）。

imageURLs = this.uploadImages(); // <-- Wait for this to complete and return the image URIs
this.createPost("Hello, world!", imageURLs) // <-- then do this

Answer 1

由于您调用异步

getDownloadURL()

方法的次数可变（即在编码时未知），因此您需要使用

Promise.all()

，如下所示：

uploadImages() {
    const files = document.querySelector('#imagesInput').files;

    const promises = [];
    files.forEach(image => {
        console.log("uploading", image.name)
        const name = (+new Date()) + '-' + image.name;
        const task = fb.storage.child(name).put(image, { contentType: image.type });
        promises.push(task);
    });

    return Promise.all(promises)
        .then(snapshotsArray => {
            // snapshotsArray is an array with a variable number of elements
            // You again need to use Promise.all
            const promises = [];
            snapshotsArray.forEach(snapshot => {
                promises.push(snapshot.ref.getDownloadURL());
            })
            return Promise.all(promises);
        });
}

uploadImages()

函数是异步并返回一个Promise（因为

Promise.all()

和

then()

返回Promise）：因此您需要使用

then()

来调用它，如下所示：

this.uploadImages()
.then(imageURLs => {
   this.createPost("Hello, world!", imageURLs) 
})

Answer 2

将

.addOnSuccessListener

添加到上传图像的行，并在其中添加下一部分代码

像这样

imageURLs = this.uploadImages().addOnSuccessListener(new OnSuccessListener() 
({

this.createPost("Hello, world!", imageURLs)

});

我不确定代码是否完全正确，这取决于您到底想要做什么，但它会让您大致了解需要做什么