Firebase 存储 - 在执行功能之前等待所有上传任务完成

Question

我正在使用以下代码将一个或多个文件上传到 Firebase 存储。上传完成后，downloadURL 会记录在控制台中。

当所有文件上传后，我想在 forEach 函数之外执行另一个函数。当所有上传任务完成后，如何打印控制台日志？

onSubmit = e => {
    e.preventDefault();
    const { files } = this.state;

    files.forEach(file => {
        const uploadTask = Storage.ref(`files/${file.name}`).put(file);

        uploadTask.on('state_changed', snapshot => {
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log(progress);
        }, error => { console.log(error) }, () => {
            uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                console.log(downloadURL);
            });
        });
    });

    //Wait till all uploads are completed
    console.log('all uploads complete');
}

Answer 1

UploadTask对象的行为就像承诺一样，因为它们有then()和 catch() 方法。因此，您可以将它们全部收集到一个数组中，并用于Promise.all()生成另一个在所有上传完成时解析的承诺。

const promises = [];
files.forEach(file => {
    const uploadTask = Storage.ref(`files/${file.name}`).put(file);
    promises.push(uploadTask);

    uploadTask.on('state_changed', snapshot => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log(progress);
    }, error => { console.log(error) }, () => {
        uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
            console.log(downloadURL);
        });
    });
});

Promise.all(promises).then(tasks => {
    console.log('all uploads complete');
});