reactjs - 如何修复“NativeFirebaseError: [storage/object-not-found] No object exists at the desired reference.”？

问题描述

我有一个 ios 移动应用程序，用户可以在其中将图像上传到外部数据库（Firebase 存储），然后我希望他们上传的图像显示在不同的屏幕上。我以为我有这个工作，但我现在收到这个错误：

这是该屏幕显示图像的代码，正如您在第 17 行看到的那样.catch(e => console.log('getting downloadURL of image error => ', e));：

import React, {useState} from 'react';
import 'react-native-gesture-handler';
import {Text, View, Image, StyleSheet} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {firebase} from '@react-native-firebase/storage';
import TitleBar from './TitleBar';

const WardrobeScreen = () => {
  const [imageURL, setImageURL] = useState();
  let imageRef = firebase.storage().ref('/' + imageURL);
  imageRef
    .getDownloadURL()
    .then(url => {
      //from url you can fetch the uploaded image easily
      setImageURL(url);
    })
    .catch(e => console.log('getting downloadURL of image error => ', e));
  console.log(imageURL, imageRef);

  return (
    <SafeAreaView style={{backgroundColor: '#FF6868'}}>
      <TitleBar
        pageName="Wardrobe"
        heading="Your Wardrobe"
        subHeading="So much to choose from, and space for even more!"
        backgroundColour="#FF6868"
      />

      <View style={{backgroundColor: 'white'}}>
        <Text>
          Your wardrobe items will go here and scroll down depending on how many
          you have. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Text>
        <Image source={imageURL} style={styles.image} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  image: {
    width: 150,
    height: 150,
  },
});

export default WardrobeScreen;

我在第 18 行添加： console.log(imageURL, imageRef);输出为：

这是我将图像上传到 firebase 的屏幕：

import * as React from 'react';
import {useState} from 'react';
import {
  View,
  SafeAreaView,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Alert,
  Image,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
import TitleBar from './TitleBar';

export default function UploadScreen() {
  const [image, setImage] = useState('');
  const [uploading, setUploading] = useState(false);
  const [transferred, setTransferred] = useState(0);

  const selectImage = () => {
    const options = {
      maxWidth: 2000,
      maxHeight: 2000,
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = {uri: response?.uri};
        console.log(source);
        setImage(source);
      }
    });
  };

  const uploadImage = async () => {
    const {uri} = image;
    let task; //  Add this
    if (uri) {
      const filename = uri.substring(uri.lastIndexOf('/') + 1);
      const uploadUri =
        Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
      setUploading(true);
      setTransferred(0);
      task = storage().ref(filename).putFile(uploadUri);
      // set progress state
      task.on('state_changed', snapshot => {
        setTransferred(
          Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000,
        );
      });
    }
    try {
      await task;
    } catch (e) {
      console.error(e);
    }
    setUploading(false);
    Alert.alert(
      'Photo uploaded!',
      'Your photo has been uploaded to Firebase Cloud Storage!',
    );
    setImage('');
  };

  return (
    <SafeAreaView style={{backgroundColor: '#FF6868'}}>
      <TitleBar
        pageName="Build"
        heading="Add To Your Wardrobe"
        subHeading="Choose one of the options below and build your virtual wardrobe!"
        backgroundColour="#FF6868"
      />
      <View style={{backgroundColor: 'white'}}>
        <TouchableOpacity style={styles.selectButton} onPress={selectImage}>
          <Text style={styles.buttonText}>Pick an image</Text>
        </TouchableOpacity>
        <View style={styles.imageContainer}>
          {image !== '' && image !== undefined && (
            <Image source={{uri: image?.uri}} style={styles.imageBox} />
          )}
          {uploading ? (
            <View style={styles.progressBarContainer}>
              <Progress.Bar progress={transferred} width={300} />
            </View>
          ) : (
            <TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
              <Text style={styles.buttonText}>Upload image</Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  selectButton: {
    borderRadius: 5,
    width: 150,
    height: 50,
    backgroundColor: '#8ac6d1',
    alignItems: 'center',
    justifyContent: 'center',
  },
  selectButton2: {
    borderRadius: 5,
    width: 150,
    height: 50,
    backgroundColor: '#8ac6d1',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },
  uploadButton: {
    borderRadius: 5,
    width: 150,
    height: 50,
    backgroundColor: '#ffb6b9',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  imageContainer: {
    marginTop: 30,
    marginBottom: 50,
    alignItems: 'center',
  },
  progressBarContainer: {
    marginTop: 20,
  },
  imageBox: {
    width: 300,
    height: 300,
  },
});

这是我的 Firebase 存储以及存储的图像之一的示例：

我在这里做错了什么才给出这个错误？我不确定为什么它没有正确引用？

标签： reactjsfirebasereact-nativereact-native-iosreact-native-firebase

reactjs - 如何修复“NativeFirebaseError: [storage/object-not-found] No object exists at the desired reference.”？

问题描述

解决方案

推荐阅读