React Native 上传多个图像到firebase - blob崩溃应用程序

xqkwcwgp  于 2023-05-18  发布在  React
关注(0)|答案(1)|浏览(112)

似乎找不到与我所经历的类似的场景。
我让一个用户在我的应用程序中运行一系列步骤,沿着拍照并将其保存到Redux商店。在最后一个屏幕上,他们可以上传照片到firebase存储。
在最后一个(上传)屏幕上,我使用“useSelector”从商店中提取照片并保存为变量。
我通过一个函数将照片转换成一个blob,它允许我上传到firebase。一旦我试图循环或只是运行背靠背功能,将每个图像转换为一个blob,我的应用程序崩溃。例如-如果我创建了第二个名为“uploadImages 2”的函数并重复代码(使用第二个图像),然后添加到我的onPress处理程序,它将使我的应用程序崩溃。但是,如果我只运行一次blob函数,只上传一张图像,它就能正常工作。
我正在寻找帮助找到一个解决方案,我可以通过循环或运行通过每个图像迭代和上传到firebase个别功能。
理想情况下,我将运行一个循环,通过一个数组的照片,用户可以选择上传任何地方从10(最小)到16(最大)的照片。现在我只包括了两张我正在测试的照片。
我的应用程序由Expo管理,我使用的是Firebase V9。
感谢您的帮助!

import React from 'react';

import { ActivityIndicator, StyleSheet, Button, Text, ScrollView, View, Image } from 'react-native';

import { useSelector, useDispatch } from "react-redux";

import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes } from 'firebase/storage';

import { useState } from 'react';

const Firebase = () => {

const thePhoto1 = useSelector((state) => state.pickupPhotos.photo1)
const thePhoto2 = useSelector((state) => state.pickupPhotos.photo2)
const tripId = useSelector((state) => state.pickupInfo.tripNumber)

const firebaseConfig = {
//removed
};

initializeApp(firebaseConfig);

const storage = getStorage(); //the storage itself

const uploadImages = async () => {

const fileName = "/" + tripId.toString() + "/" + Math.random()
const ref2 = ref(storage, fileName); //how the image will be addressed inside the storage

        const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
            resolve(xhr.response);
        };
        xhr.onerror = function() {
            reject(new TypeError('Network request failed'));
        };
        xhr.responseType = 'blob';
        xhr.open('GET', thePhoto1, true);
        xhr.send(null);
    })

    uploadBytes(ref2, blob); //upload images
    console.log("done")

  };

    return (
    <ScrollView style={styles.container}>

        <Image source={{uri: thePhoto1}} style={styles.theImg} />
        <Image source={{uri: thePhoto2}} style={styles.theImg} />

        <Button 
            style={styles.submitBtn}
            title='UPLOAD PHOTOS TO FIREBASE'
            onPress={ () => {
                uploadImages()
              }             
            }
        /> 
    </ScrollView>
    );
};

const styles = StyleSheet.create({
    theImg: {
        width:275,
        height:275,
        position:'relative',
        marginTop:10,
        left:10
    },
    submitBtn: {
        marginBottom:80
    }
});

export default Firebase;
628mspwn

628mspwn1#

改为使用uploadBytesResumable

import {getDownloadURL, getStorage, ref, uploadBytesResumable} from "firebase/storage";

   
   const uploadImage = async (uri: any, fileName: string) => {
        try {
            const response = await fetch(uri);
            const blobFile = await response.blob();
            const storageRef = ref(storage, 'gallery/' + fileName);

            const snapshot = await uploadBytesResumable(storageRef, blobFile);

            const imageUrl = await getDownloadURL(snapshot?.ref);
            console.log('Download URL:', imageUrl);
        } catch (error) {
            console.error('Error uploading or retrieving image:', error);
        }
    };

相关问题