从Firebase v8到v9添加新的用户信息

Question

我有一个代码来创建用户与图像和用户名到Firebase v8，我不能取代它到Firebase v9。

有人能帮帮我吗?谢谢你！

import { useState, useEffect } from 'react'
import { projectAuth, projectStorage, projectFirestore } from '../firebase/config'
import { useAuthContext } from './useAuthContext'

export const useSignup = () => {
const [isCancelled, setIsCancelled] = useState(false)
const [error, setError] = useState(null)
const [isPending, setIsPending] = useState(f`enter code here`alse)
const { dispatch } = useAuthContext()


// upload user thumbnail
const uploadPath = `thumbnails/${res.user.uid}/${thumbnail.name}`
const img = await projectStorage.ref(uploadPath).put(thumbnail)
const imgUrl = await img.ref.getDownloadURL()

// add display AND PHOTO_URL name to user
await res.user.updateProfile({ displayName, photoURL: imgUrl })

Answer 1

import {st, db} from '../firebase/config'
import { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
import { doc, setDoc } from 'firebase/firestore';
const _storageRef = ref(st, "thumbnails/" + res.user.uid + "/" + thumbnail.name)
const _uploadTask = uploadBytesResumable(_storageRef, file);
_uploadTask.on("state_changed", (snapshot) => {
console.log((snapshot.bytesTransferred/snapshot.totalBytes) * 100)
},(error) => {
console.error(error)
}, async () => {
await getDownloadURL(_storageRef)
.then((url) => {
//update database with the new image url
console.log(url)
//setDoc(doc(db, "users", uid), {
//      photoURL: url
//   }, {merge: true}) <- to not erase the rest of the values like displayName
})
.catch(error => console.error(error))
})

Answer 2

文档有V8(命名空间)和V9(模块化)语法的示例。您可以切换到模块选项卡参考。对于这种情况，尝试按如下所示重构代码:

import { ref, uploadBytes } from "firebase/storage"
import { updateProfile } from "firebase/auth"
const storageRef = ref(projectStorage, `thumbnails/${res.user.uid}/${thumbnail.name}`);
// 'file' comes from the Blob or File API
// uploadBytes() instead of .put()
uploadBytes(storageRef, file).then(async (snapshot) => {
console.log('Uploaded a blob or file!');
// updateProfile() is now a top-level function
// and not a method on User object
await updateProfile(res.user, {
displayName: name
});
console.log("User profile updated")
});

还要确保您已经分别使用getAuth()和getStorage()初始化了认证和存储。

付款:

• 在Web上上传云存储文件

• 使用Firebase模块化SDK更新用户配置文件