Я пытаюсь загрузить изображения из своего приложения React Native в Firebase, но получаю сообщение об ошибке: [object Object] - PullRequest
Новая
       6

Я пытаюсь загрузить изображения из своего приложения React Native в Firebase, но получаю сообщение об ошибке: [object Object]

0 голосов
/ 09 апреля 2020

Это мой компонент выбора изображений: 

import React, {Component, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  StatusBar,
  SafeAreaView,
  Dimensions,
  StyleSheet,
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import Firebase from 'firebase';
import 'firebase/storage';
import {addPost} from './api/PostsApi';

const PostImage = ({image, onImagePicked}) => {
  const [fileData, setFileData] = useState(' ');
  const [fileUri, setFileUri] = useState(' ');
  const [fileName, setFileName] = useState(' ');

  function chooseImage() {
    let options = {
      title: 'Select Image',
      customButtons: [
        {name: 'customOptionKey', title: 'Choose Photo from Custom Option'},
      ],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.showImagePicker(options, response => {
      console.log('Response = ', 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);
        alert(response.customButton);
      } else {
        const source = {uri: response.uri};

        console.log('response', JSON.stringify(response));
        setFileData(response.data);
        setFileUri(response.uri);
        setFileName(response.fileName);
      }
    });
  }

  function launchCamera() {
    let options = {
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.launchCamera(options, response => {
      console.log('Response = ', 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);
        alert(response.customButton);
      } else {
        const source = {uri: response.uri};
        console.log('response', JSON.stringify(response));
        setFileData(response.data);
        setFileUri(response.uri);
        setFileName(response.fileName);
      }
    });
  }

  function launchImageLibrary() {
    let options = {
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.launchImageLibrary(options, response => {
      console.log('Response = ', 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);
        alert(response.customButton);
      } else {
        const source = {uri: response.uri};
        console.log('response', JSON.stringify(response));
        setFileData(response.data);
        setFileUri(response.uri);
        setFileName(response.fileName);
      }
    });
  }
  function renderFileData() {
    if ({fileData}) {
      return (
        <Image
          source={{uri: 'data:image/jpeg;base64,' + fileData}}
          style={styles.images}
        />
      );
    } else {
      return (
        <Image source={require('./images/dummy.jpeg')} style={styles.images} />
      );
    }
  }

  function renderFileUri() {
    if ({fileUri}) {
      return <Image source={{uri: fileUri}} style={styles.images} />;
    } else {
      return (
        <Image source={require('./images/gallery.png')} style={styles.images} />
      );
    }
  }

  function uploadPhoto(values, onPostUploaded) {
    if ({fileUri}) {
      console.log(fileUri);
      const storageRef = Firebase.storage().ref('posts/images/' + fileName);
      storageRef.put({fileUri}).on(
        Firebase.storage.TaskEvent.STATE_CHANGED,
        snapshot => {
          console.log('snapshot: ' + snapshot.state);
          console.log(
            'progress: ' +
              (snapshot.bytesTransferred / snapshot.totalBytes) * 100,
          );
          if (snapshot.state === Firebase.storage.TaskState.SUCCESS) {
            console.log('Success');
          }
        },
        error => {
          console.log('image upload error: ' + error.toString());
        },
        () => {
          storageRef.getDownloadURL().then(downloadUrl => {
            console.log('File available at: ' + downloadUrl);
            // delete post.imageUri;
            // values.image = downloadUrl;
            // addPost(values, onPostUploaded);
          });
        },
      );
    } else {
      console.log('Skipping image upload');
      // delete values.imageUri;
      // addPost(values, onPostUploaded);
    }
  }

  return (
    <View>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={styles.body}>
          <Text style={{textAlign: 'center', fontSize: 20, paddingBottom: 10}}>
            Pick Images from Camera & Gallery
          </Text>
          <View style={styles.ImageSections}>
            <View>
              {renderFileData()}
              <Text style={{textAlign: 'center'}}>Base 64 String</Text>
            </View>
            <View>
              {renderFileUri()}
              <Text style={{textAlign: 'center'}}>File Uri</Text>
            </View>
          </View>

          <View style={styles.btnParentSection}>
            <TouchableOpacity onPress={chooseImage} style={styles.btnSection}>
              <Text style={styles.btnText}>Choose File</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={launchCamera} style={styles.btnSection}>
              <Text style={styles.btnText}>Directly Launch Camera</Text>
            </TouchableOpacity>

            <TouchableOpacity onPress={uploadPhoto} style={styles.btnSection}>
              <Text style={styles.btnText}>Confirm Photo</Text>
            </TouchableOpacity>
          </View>
        </View>
      </SafeAreaView>
    </View>
  );
};

Я хочу, чтобы фотография была загружена в Firebase Storage, но при нажатии кнопки «Подтвердить фотографию» я получаю сообщение об ошибке [объект объекта] и больше ничего. Объект ответа и его переменные доступны и регистрируются в отладчике. Изображения также отображаются в компоненте View. По сути, все остальное работает как задумано, и я не уверен, где я иду не так. У кого-нибудь есть совет?

...