【问题标题】:React Native Firebase Multiple Image Upload ProblemReact Native Firebase 多张图片上传问题
【发布时间】:2025-12-09 12:50:01
【问题描述】:

在 React Native 中,我使用 ImagePicker 包选择图像并将图像上传到 Firebase 存储。我还想通过 Firebase Rest Api 使用 Getdownloadurl() 方法发送 Firebase 存储图像链接。

我设法上传图片,但是当我通过发出 rest api 发布请求来发送它们时,图片链接变为 未定义。 我正在从控制台屏幕发出没有 100% 的发布请求的总图像大小。

const uploadImage = async (uploadUri: string, transferred: number) => {
    let filename = uploadUri.substring(uploadUri.lastIndexOf('/') + 1);
    transferred = 0;
    const storageRef = storage().ref(`images/${filename}`);
    const task = storageRef.putFile(uploadUri);
    task.on('state_changed', taskSnapshot => {
        console.log(`${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`);
        transferred = Math.round((taskSnapshot.bytesTransferred / taskSnapshot.totalBytes) * 100);
    });
    try {
        await task;
        const url = await storageRef.getDownloadURL();
        return url;
    } catch (error) {
        console.log(error);
        return null;
    }
}

export const addPost = (files: string[], post: Post): ThunkAction<void, RootState, null, AddPostAction> => {
    return async dispatch => {
        try {
            dispatch({ type: ADD_POST_LOADING, payload: true });
            const imageData: Image[] = [];
            files.map(async (item) => {
                const imageUrl = await uploadImage(item, 0);
                imageData.push({ image: imageUrl! });
            });
            const postData: Post = {
                ...post,
                thumb: imageData[0].image
            }
            const response = await fetch(`${BASE_URL}/post.json`, { method: "POST", body: JSON.stringify(postData) });
            if (response.ok) {
                const successPostData: AddPostSuccess = await response.json();
                dispatch({ type: ADD_POST_SUCCESS, payload: successPostData });
            } else {
                dispatch({ type: ADD_POST_ERROR, payload: "404" });
            }

        } catch (error) {
            console.log(error);
        }
    }
}

【问题讨论】:

    标签: javascript typescript react-native firebase-storage


    【解决方案1】:

    map 无法处理 async 代码。尝试更改这部分:

     files.map(async (item) => {
                    const imageUrl = await uploadImage(item, 0);
                    imageData.push({ image: imageUrl! });
                });
    

    到这里:

    for (let i = 0; i < files.length; i++) {
                  const item = files[i];
                  const imageUrl = await uploadImage(item, 0);
                    imageData.push({ image: imageUrl! }); 
                }
    

    【讨论】: