如何在注册表中保存用户图像及其注册凭据？反应本机，火力地堡

Question

我有一个简单的注册表，用户输入一些信息（电子邮件、phone 号码、密码...等），这些信息保存在名为“Doctors”的 firebase 集合中。我希望用户上传个人资料图片，并希望在按下注册按钮时将其保存在与用户信息相同的集合中。

这是我的注册码：

export class Register extends Component {
  constructor(props) {
     super(props);
       this.state = {
        email: '',
        password: '',
        name: '', 
        lastname: '',
        degree: '',
        phonenumber:'',
        description:''
           }

    this.onSignUp = this.onSignUp.bind(this)
        }


  onSignUp(){

    if(
    this.state.email != '' &&
    this.state.password != '' &&
    this.state.name != '' &&
    this.state.lastname != '' 
    ){
     const { email, password, name, lastname, degree, phonenumber, description } = this.state;
     firebase.auth().createUserWithEmailAndPassword(email, password)
        .then((result) => {
            firebase.firestore().collection("Doctors")
                .doc(firebase.auth().currentUser.uid)
                .set({
                    name,
                    email,
                    lastname,
                    degree,
                    phonenumber,
                    description
                })
            console.log(result)
        })
        .catch((error) => {
            console.log(error)
        })
         }
   else{
   alert("Make sure you filled all the fields with correct info!");
     }
    }

这是图像选择器代码：

  export default function ImagePickerExample() {
   const [image, setImage] = useState(null);

     useEffect(() => {
(async () => {
  if (Platform.OS !== 'web') {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      alert('Sorry, we need camera roll permissions to make this work!');
      }
      }
    })();
  }, []);

const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  aspect: [4, 3],
  quality: 1,
});

console.log(result);

if (!result.cancelled) {
  setImage(result.uri);
}

};

Answer 1

理想情况下，您应该使用 Firebase Storage 来保存图像或文件，而不是 Firestore。单个 Firestore 文档有 1 MB 的限制，因此即使您将图像存储为 base64 字符串也可能不够。

1：从ImagePicker获取base64字符串：

const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  base64: true,
  //      ^^^^
  aspect: [4, 3],
  quality: 1,
});

const base64String = pickImage.base64
// This is your image in base64 format
// Store it in your state so you can access it while uploading to Firebase

2。上传到 Firebase 存储：

async onSignUp(){
  if (this.state.email != '' && this.state.password != '' && this.state.name != '' && this.state.lastname != '') {
    const { email, password, name, lastname, degree, phonenumber, description } = this.state;
    const userCredential = await firebase.auth().createUserWithEmailAndPassword(email, password)
    const {uid} = userCredential.user            
    const imageBase64String = "" // Get the base64string saved in state here
    await Promise.all([
      firebase.firestore()
        .collection("Doctors")
        .doc(uid)
        .set({name, email, lastname, degree, phonenumber, description}),
      firebase.storage()
        .ref('users/' + uid)
        .putString(imageBase64String.split(',')[1], "base64", {contentType: 'image/jpeg'})
    ])
 } else{
   alert("Make sure you filled all the fields with correct info!");
 }
}

我以前没有用过那个图像选择器。如果您传递 base64: true，那么它将 return 该图像的 base64 字符串，如 documentation 中所述。如何处理状态并在注册函数中获取 base64 字符串完全取决于您。为了方便起见，我还制作了该功能 async 。我们运行同时使用 Promise.all()

这两个承诺（将文档添加到 Firestore 并将图像上传到 Firebase 存储）

如何在注册表中保存用户图像及其注册凭据？反应本机，火力地堡

How can I save user's image with their sign up credentials in the registration form? React native, Firebase

firebase

react-native

firebase-storage

google-cloud-firestore