reactjs - 将多张图片上传到 firebase，然后将图片 url 保存到 firestore

Question

有人可以帮助我修改代码，以便等待上传完成然后将图片网址保存到 Firestore？我是异步和等待的新手，似乎无法弄清楚。fileDownloadUrl即使我在里面保存到firestore，它仍然是空的Promise.all(promises).then()：

cxonst promises = [];
const fileDownloadUrl = [];

pictures.forEach(file => {
    const uploadTask = 
    firebase
    .storage()
    .ref()
    .child(`img/upl/${file.data.name}`)
    .put(file.uploadTask);
    
    promises.push(uploadTask);

    uploadTask.on(
        
        firebase.storage.TaskEvent.STATE_CHANGED,
        snapshot => {
            const progress = Math.round((snapshot.bytesTransferred / 
                 snapshot.totalBytes) * 100);
            
            if (snapshot.state === firebase.storage.TaskState.RUNNING) {
                console.log(`Progress: ${progress}%`);
            }
        },
        error => console.log(error.code),
        async () => {
            const downloadURL = await 
            uploadTask.snapshot.ref.getDownloadURL();
            fileDownloadUrl.push(downloadURL);
            }
        );
    });

    Promise.all(promises)
    .then(() => {
        db
        .collection("properties")
        .add({
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            title: title,
            description: description,
            pictures: fileDownloadUrl,
            user: user.uid
        })
    })
    .catch(err => console.log(err));

标签： reactjsfirebasegoogle-cloud-firestorefirebase-storage

Answer 1

在等待put调用的承诺完成时，您将使用uploadTask.on()来确定下载 URL。由于这on不是承诺的一部分，因此不能保证它们是同步的。

一个更简单且可行的方法应该是：

const promises = pictures.map(file => {
  const ref = firebase.storage().ref().child(`img/upl/${file.data.name}`);
  return ref
    .put(file.uploadTask)
    .then(() => ref.getDownloadURL())
});

Promise.all(promises)
.then((fileDownloadUrls) => {
    db
    .collection("properties")
    .add({
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        title: title,
        description: description,
        pictures: fileDownloadUrls,
        user: user.uid
    })
})
.catch(err => console.log(err));