React - 将头像上传到 firebase

Question

下午好，我不知道如何将照片（头像）上传到 firebase，但每个用户的头像都是不同的，并在每次用户登录时保存。通过 firebase 身份验证进行用户注册

const [user, loading] = useAuthState(auth);
  const [image , setImage] = useState("");
  const storage = getStorage();

//upload function
  const upload = ()=>{
    const storageRef = ref(storage, `usersAvatar/${image.name}`);

    if(image == null) return;
    uploadBytes(storageRef, image).then(() =>{
      getDownloadURL(storageRef).then((url) => {
        setUrl(url);
      })
    })
  }


// return
<input type="file" onChange={(e)=>{setImage(e.target.files[0])}}/>
<button onClick={upload}>Upload</button>

Answer 1

由于您在 Cloud Storage 中使用此位置来存储用户图像：

const storageRef = ref(storage, `usersAvatar/${image.name}`);

上传相同 image.name 的任何用户最终都会覆盖其他人的图像。

您要做的是基于用户的 UID 上传位置。例如：

const storageRef = ref(storage, `usersAvatar/${user.uid}/${image.name}`);

React - 将头像上传到 firebase

React - Upload avatar to firebase

javascript

file-upload

firebase

reactjs

firebase-storage