Question

我无法返回数组中的图像

2021-04-07

51

javascript reactjs react-redux

我从 firebase 中提取图像并放置它们，但是函数结束时没有成功。

export const saveImages = async (images) => {
    let imgs = [];
    try {
        images.forEach(image => {

            const imgRef = storage.ref(`Works_Realized/Images/${image.name}`).put(image);
            imgRef.on(
                "state_changed",
                snapshot => { },
                err => {
                    console.log(err);
                },
                () => {
                    storage
                        .ref('Works_Realized/Images')
                        .child(image.name)
                        .getDownloadURL()
                        .then(imgUrl => {
                            imgs = [...imgs, { name: image.name, url: imgUrl }];
                            // imgs.push({ name: image.name, url: imgUrl });
                            // console.log(imgs);
                        })
                }
            );

        });
        if (imgs.length > 0) {
            return imgs;
        } else {
            return [];
        }
    } catch (e) {
        Swal.fire('Error', e.message, 'error');
    }
}

请有人帮忙，我必须返回一个带有 de url 图像的数组。

Answer 1

欢迎来到 stack overflow，本例中的问题是您使用承诺来获取 downloadUrl，但在此之前您返回了 imgs 数组。在本例中，您可以将每张图片映射到一个承诺，并等待 Promise.all 解析所有图片，从而为您提供预期的数组。如果您不了解承诺，我建议您观看这个简短的视频。这是修改后的代码

export const saveImages = async (images) => {
    try {
        const imgs = await images.map(async (image) => {

            const imgRef = storage.ref(`Works_Realized/Images/${image.name}`).put(image);
            imgRef.on(
                "state_changed",
                snapshot => { },
                err => {
                    console.log(err);
                },
                () => {
                    const imgUrl = await storage
                        .ref('Works_Realized/Images')
                        .child(image.name)
                        .getDownloadURL();
                    return { name: image.name, url: imgUrl }

                }
            );

        });
        if (imgs.length > 0) {
            return imgs;
        } else {
            return [];
        }
    } catch (e) {
        Swal.fire('Error', e.message, 'error');
    }
}