如何将本地URL从实时数据库发送到Firebase存储？

Question

我在Firebase存储方面遇到一些问题， 我正在执行注册功能以与实时Firebase集成并保存一些数据，例如“用户名，头像等。 我使用react native图像选择器选择图像并将响应作为对象发送到数据库，现在我需要获取此图像并将其保存到Firebase Storage，这是我的代码

图像对象：

注册

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>
    );
  }
}

Answer 1

要将文件上传到存储，请在存储参考上使用put。

来自documentation：

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

在您的情况下，它将类似于以下内容。请确保您了解代码的每一行实际上在做什么。

您的文件似乎只是一个Blob，因此请使用文档中提到的Blob API。

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')});