Firebase存储-等待所有上传任务完成后再执行功能

小编典典

Firebase存储-等待所有上传任务完成后再执行功能

reactjs

我正在使用以下代码将一个或多个文件上传到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');
}

阅读 374

2020-07-22

共1个答案

小编典典

UploadTask对象的行为与promise一样，因为它们具有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');
});

2020-07-22