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

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

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

  1. import React from 'react';
  2. import { ActivityIndicator, StyleSheet, Button, Text, ScrollView, View, Image } from 'react-native';
  3. import { useSelector, useDispatch } from "react-redux";
  4. import { initializeApp } from "firebase/app";
  5. import { getStorage, ref, uploadBytes } from 'firebase/storage';
  6. import { useState } from 'react';
  7. const Firebase = () => {
  8. const thePhoto1 = useSelector((state) => state.pickupPhotos.photo1)
  9. const thePhoto2 = useSelector((state) => state.pickupPhotos.photo2)
  10. const tripId = useSelector((state) => state.pickupInfo.tripNumber)
  11. const firebaseConfig = {
  12. //removed
  13. };
  14. initializeApp(firebaseConfig);
  15. const storage = getStorage(); //the storage itself
  16. const uploadImages = async () => {
  17. const fileName = "/" + tripId.toString() + "/" + Math.random()
  18. const ref2 = ref(storage, fileName); //how the image will be addressed inside the storage
  19. const blob = await new Promise((resolve, reject) => {
  20. const xhr = new XMLHttpRequest();
  21. xhr.onload = function() {
  22. resolve(xhr.response);
  23. };
  24. xhr.onerror = function() {
  25. reject(new TypeError('Network request failed'));
  26. };
  27. xhr.responseType = 'blob';
  28. xhr.open('GET', thePhoto1, true);
  29. xhr.send(null);
  30. })
  31. uploadBytes(ref2, blob); //upload images
  32. console.log("done")
  33. };
  34. return (
  35. <ScrollView style={styles.container}>
  36. <Image source={{uri: thePhoto1}} style={styles.theImg} />
  37. <Image source={{uri: thePhoto2}} style={styles.theImg} />
  38. <Button
  39. style={styles.submitBtn}
  40. title='UPLOAD PHOTOS TO FIREBASE'
  41. onPress={ () => {
  42. uploadImages()
  43. }
  44. }
  45. />
  46. </ScrollView>
  47. );
  48. };
  49. const styles = StyleSheet.create({
  50. theImg: {
  51. width:275,
  52. height:275,
  53. position:'relative',
  54. marginTop:10,
  55. left:10
  56. },
  57. submitBtn: {
  58. marginBottom:80
  59. }
  60. });
  61. export default Firebase;
628mspwn

628mspwn1#

改为使用uploadBytesResumable

  1. import {getDownloadURL, getStorage, ref, uploadBytesResumable} from "firebase/storage";
  2. const uploadImage = async (uri: any, fileName: string) => {
  3. try {
  4. const response = await fetch(uri);
  5. const blobFile = await response.blob();
  6. const storageRef = ref(storage, 'gallery/' + fileName);
  7. const snapshot = await uploadBytesResumable(storageRef, blobFile);
  8. const imageUrl = await getDownloadURL(snapshot?.ref);
  9. console.log('Download URL:', imageUrl);
  10. } catch (error) {
  11. console.error('Error uploading or retrieving image:', error);
  12. }
  13. };
展开查看全部

相关问题