如何在注册表单中保存用户's图像及其注册凭据?React native, Firebase

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 Storage:

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，那么它将返回文档中提到的图像的base64字符串。这完全取决于你如何处理状态并在signup功能中获取base64字符串。为了方便起见，我把这个函数写成async。我们同时运行两个承诺(添加文档到Firebase和上传图像到Firebase Storage)使用Promise.all()