Question

我有一个简单的注册表单，用户输入一些信息（电子邮件、电话号码、密码等），这些信息会保存在名为“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，那么它将返回 documentation 中提到的该图像的 base64 字符串。如何处理状态并在注册函数中获取 base64 字符串完全取决于您。为了方便起见，我还制作了该函数 async。我们使用 Promise.all()

同时运行这两个承诺（将文档添加到 Firestore 并将图像上传到 Firebase Storage）

如何在注册表单中保存用户的图像及其注册凭据？反应原生，Firebase

1 个答案: