如何在注册时上传图片到Firebase？

Question

我想上传一张图片到Firebase存储空间。问题是由于用户还没有注册，我没有他们的 uid.

我依靠的是 onAuthStateChanged 来获取用户ID，并将图片上传到他们的桶中，但到目前为止，效果并不理想。

const { userObject } = useContext(Context) //trying to get the uid from here

onSubmit={(values, { setSubmitting }) => {
        async function writeToFirebase() {
          firebaseService.auth.createUserWithEmailAndPassword(values.email, values.password)
          await firebaseService.firestore.collection('businessesPendingAdminApproval').add(values)
        }

        writeToFirebase()

        async function sendToFirebaseImageBucket(photo, uid) {
          const businessRef = await firebaseService.firestore.doc(
            `businessesPendingAdminApproval/${uid}`,
          )
          firebaseService.storage
            .ref()
            .child('businesses')
            .child(uid)
            .child('avatar-image')
            .put(photo)
            .then(response => response.ref.getDownloadURL())
            .then(photoURL => businessRef.update({ avatarImage: photoURL })) //try to update avatarImage
        }

        const uid = userObject.uid //undefined, can't get uid
        sendToFirebaseImageBucket(values.avatarImage, uid) //uid gets passed as undefined

      }}>

我设置 userObject 也就是我想从这里获取uid的地方。

设置userObject最终成功了，但也许对我来说还不够快，无法将它传递给一个函数（如上面的代码）。

useEffect(() => {
    firebaseService.auth.onAuthStateChanged(async function (userAuth) {
      if (userAuth) {
        const user = await firebaseService.createUserProfileDocument(userAuth)
        setUserObject(user) //set userObject which has an uid field.
      } else {
        console.log('no one signed in')
      }
    })
  }, [])

Answer 1

只要把你的图片添加到云存储中就可以了，当你登录后，能够得到 uid......下面的代码可以帮助你，它对我来说也很有效。useEffect.

const unsubscribe = auth().onAuthStateChanged(user => {
    if (user.uid){

       const ref = storage.ref(`images/${user.uid}`);
       const task = ref.putFile(_image, { contentType: 'image/jpeg' });

       task.on(firebase.storage.TaskEvent.STATE_CHANGED, snap => {

       setState({ type: 'cents', value: snap.bytesTransferred / snap.totalBytes * 100 });

      }, err => { console.log('Error in help:persisAppState: ', err) }, async () => {

            const image = await ref.getDownloadURL();

            if (image) await db.collection("imagelinks").doc(user.id).set({ image });
           });

    }
});