Firebase 9 自定义缩略图路径文档上传和缩略图加载头像

Question

我正在尝试重写 4 行 firebase v8 代码以与 v9 一起使用....但即使在研究了 Firebase 文档之后我仍然停留在这 3 行....此代码可在表单提交中找到函数并取自 Shaun Pelling（网络忍者）Udemy Firebase/React 课程之一。

代码的用途非常简单：

我想将评论上传到 firebase 中的自定义文件路径，其中包含先前在文件路径中定义为变量的 userId (uid)。然后上传文件。在我的 nabber 中，我还显示了由第 3 行代码创建的 url 中的图像。

编辑： 首先，这是文件最初上传到的 JSX：

<label>
  <span>Upload Profile Thumbnail:</span>
  <input
   required
   type="file"
   id="thumbnail"
   name="thumbnail"
  />
</label>

我指的原始 4 行 (v8):

  const res = await projectAuth.createUserWithEmailAndPassword(email, password)
        
  const uploadPath = `thumbnails/${res.user.uid}/${thumbnail.name}`
  const image = await projectStorage.ref(uploadPath).put(thumbnail)
  const imageUrl = await image.ref.getDownloadURL()

  await res.user.updateProfile({ photoURL: imageUrl })

这就是我所拥有的。（一团糟我不认为它甚至没有多大意义。我有点迷路，所以如果它也让你感到困惑，请无视......我只是想表明我正在尝试\（˚ ☐˚")/)

  import { ref, getDownloadURL, uploadBytesResumable } from 'firebase/storage'
  import { updateProfile } from 'firebase/auth'
  
  const uploadPath = `thumbnails/${res.user.uid}/${thumbnail.name}`
  const imageUrl = getDownloadURL(ref(storage, image))
  const uploadTask = uploadBytesResumable(storageRef, file, metadata )

  updateProfile(user, { photoURL: imageUrl})

旁注： 哦，一个可能不太重要的旁注（而且很可能是不必要的），在 v8 示例中，缩略图是在注册表单中上传的，因此在代码的第一位中有注册功能。在第二个示例 v9 中，我创建了一个全新的页面（仅供登录用户使用），以便他们稍后可以上传缩略图。为此，我从 currentlysignedin 用户那里获取“用户”对象，以便能够使用 updateProfile 函数。即：

  // within the v9 code example
  const { user } = useAuthContext()


  //=======================================
  // in the useAuthContext File:

  import { AuthContext } from "../CONTEXT/AuthContext.js"
  import { useContext } from "react"

  export const useAuthContext = () => {
   const context = useContext(AuthContext)
   return context
  }


  //=======================================
  // in the authContext File:

  import { createContext, useReducer, useEffect } from 'react'
  import { onAuthStateChanged } from 'firebase/auth'
  import { auth } from '../Firebase/config'

  export const AuthContext = createContext()

  export const authReducer = (state, action) => {
   switch (action.type) {
   case 'LOGIN':
    return { ...state, user: action.payload }
   case 'LOGOUT':
    return { ...state, user: null }
   case 'AUTH_IS_READY':
    return { user: action.payload, authIsReady: true }
   default:
  return state
 }
}

export const AuthContextProvider = ({ children }) => {
 const [state, dispatch] = useReducer(authReducer, { 
  user: null,
  authIsReady: false
})

useEffect(() => {
 const unsub = onAuthStateChanged(auth, user => {
  dispatch({ type: 'AUTH_IS_READY', payload: user })
  unsub()
 })
}, [])

// console.log('AuthContext state:', state)

return (
 <AuthContext.Provider value={{ ...state, dispatch }}>
  { children }
 </AuthContext.Provider>
)

}

Answer 1

在 V9 代码片段中，您试图在上传图像之前下载 URL。另外，如果您不需要跟踪更新进度，请改用 uploadBytes()：

import { ref, getDownloadURL, uploadBytesResumable } from 'firebase/storage'
import { updateProfile } from 'firebase/auth'

// pass the path in ref to create a StorageReference
const storageRef = ref(storage, `thumbnails/${res.user.uid}/${thumbnail.name}`)

// upload image, file is a blob here
await uploadBytes(storageRef, file);

const downloadUrl = await getDownloadURL(storageRef);

// this function returns promise too, add await 
await updateProfile(user, { photoURL: downloadUrl })

Firebase 9 自定义缩略图路径文档上传和缩略图加载头像

Firebase 9 custom thumbnail path doc upload and thumbnail load for avatar

javascript

firebase

reactjs

firebase-storage