Как отправить локальный URL из базы данных в реальном времени в хранилище Firebase? - PullRequest
Новая
       15

Как отправить локальный URL из базы данных в реальном времени в хранилище Firebase?

0 голосов
/ 14 марта 2019

У меня есть проблема с Firebase Storage, Я делаю функцию регистрации для интеграции с базой данных в реальном времени и сохранения некоторых данных, таких как «имя пользователя, аватар и т. Д. Я использую сборщик реагирующих изображений, чтобы выбрать изображения и отправить ответ в базу данных как объект. Теперь мне нужно получить это изображение и сохранить его в Firebase Storage. Это мой код

объект изображения: AvatarSource

SignUp 

import React from "react";
import { Text, TextInput, View, TouchableOpacity, Image } from "react-native";
import styles from "../Style/styles";
import firebase from "react-native-firebase";
import ImagePicker from "react-native-image-picker";

const options = {
  title: "Select Avatar",
  storageOptions: {
    skipBackup: true,
    path: "images"
  }
};

export default class signUp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      username: "",
      avatarSource: "",
      errorMessage: null
    };
  }

  SignUpUser = (
    email,
    password,
    username,
    mobileNumber,
    city,
    avatarSource
  ) => {
    try {
      // if (this.state.password.length < 6) {
      //   alert("Please Enter At least 6 characters");
      //   return;
      // }
      // var userId = firebaseApp.auth().currentUser.uid;

      firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then(user => {
          firebase
            .database()
            .ref(`users/${user.uid}`)
            .set({
              email: email,
              username: username,
              mobileNumber: mobileNumber,
              city: city
              avatarSource: avatarSource
            });
          // console.log("uid:", user);

          firebase.storage().ref(`UserAvatar/${avatarSource.data}`);

          this.props.navigation.navigate("Home");
        });
    } catch (error) {
      console.log(error.toString());
    }
  };


  handleAvatar = () => {
    ImagePicker.showImagePicker(options, response => {
      console.log("Response = ", response);
      if (response.uri) {
        this.setState({ avatarSource: response });
      }
    });
  };
  render() {
    const { avatarSource } = this.state;
    return (
      <View style={styles.container}>
        <Text style={{ color: "#e93766", fontSize: 40 }}>Sign Up</Text>
        {this.state.errorMessage && (
          <Text style={{ color: "red" }}>{this.state.errorMessage}</Text>
        )}
        <TouchableOpacity onPress={this.handleAvatar}>

          <Image
            source={{ uri: avatarSource.uri }}
            style={[styles.uploadAvatar, { borderRadius: 100 }]}
            resizeMode="cover"
          />


        </TouchableOpacity>

        <TextInput
          placeholder="Username"
          autoCapitalize="none"
          style={styles.textInput}
          onChangeText={username => this.setState({ username })}
          value={this.state.username}
        />
        <TextInput
          placeholder="Email"
          autoCapitalize="none"
          style={styles.textInput}
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />
        <TextInput
          placeholder="City"
          autoCapitalize="none"
          style={styles.textInput}
          onChangeText={city => this.setState({ city })}
          value={this.state.city}
        />
        <TextInput
          placeholder="Mobile Number"
          keyboardType="numeric"
          style={styles.textInput}
          onChangeText={mobileNumber => this.setState({ mobileNumber })}
          value={this.state.mobileNumber}
          maxLength={10}
        />
        <TextInput
          secureTextEntry
          placeholder="Password"
          autoCapitalize="none"
          style={styles.textInput}
          onChangeText={password => this.setState({ password })}
          value={this.state.password}
        />
        <TouchableOpacity
          onPress={() =>
            this.SignUpUser(
              this.state.email,
              this.state.password,
              this.state.username,
              this.state.mobileNumber,
              this.state.city,
              this.state.avatarSource
            )
          }
        >
          <Text style={{ color: "#e93766", fontSize: 18 }}>Sign Up </Text>
        </TouchableOpacity>

        <View>
          <Text>

            Already have an account?
            <Text
              onPress={() => this.props.navigation.navigate("Login")}
              style={{ color: "#e93766", fontSize: 18 }}
            >

              Login
            </Text>
          </Text>
        </View>
      </View>
    );
  }
}

1 Ответ

0 голосов
/ 14 марта 2019

Чтобы загрузить файл в хранилище, используйте put в вашем хранилище. Ссылка.

Из документации : 

var file = ... // use the Blob or File API
ref.put(file).then(function(snapshot) {
  console.log('Uploaded a blob or file!');
});

В вашем случае это будетвыглядеть примерно такПожалуйста, убедитесь, что вы понимаете, что на самом деле делает каждая строка кода.

Похоже, что ваш файл - просто BLOB-объект, поэтому используйте API Blob, как упомянуто в документации. 

let file = // whatever your file is
let path = // whatever the path you want in Storage is.
           // if it does not exist yet, you will need to create it.
let ref = firebase.storage().ref('UserAvatar/' + path);
ref.put(file).then(snapshot => {console.log('done')});
...