似乎找不到与我所经历的类似的场景。
我让一个用户在我的应用程序中运行一系列步骤,沿着拍照并将其保存到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;
1条答案
按热度按时间628mspwn1#
改为使用uploadBytesResumable