javascript - 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对象的行为就像 promise 一样，因为它们有 then()和 catch() 方法。因此，您可以将它们全部收集到一个数组中，并使用 Promise.all() 生成另一个在所有上传完成时解析的 promise 。

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');
});