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

Question

我在使用 Firebase 存储时遇到了一些问题， 我正在做注册功能以与实时 Firebase 集成并保存一些数据，如“用户名、头像等。 我使用反应原生图像选择器来选择图像并将响应作为对象发送到数据库现在我需要获取此图像并将它们保存到 Firebase 存储这是我的代码

图像对象：

注册

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