React Native Firebase 多张图片上传问题

Posted 2023-03-22

【中文标题】React Native Firebase 多张图片上传问题

【英文标题】：React Native Firebase Multiple Image Upload Problem

【发布时间】：2021-08-11 08:59:50

【问题描述】：

在 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);
        
    

【参考方案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! );