Firebase9自定義縮略圖路徑檔案上傳和頭像加載縮略圖

我試圖重寫 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 中，我創建了一個全新的頁面（僅對登錄用戶可用），以便他們稍后可以上傳縮略圖。為此，我從 currentsignedin 用戶中獲取“用戶”物件，以便能夠例如使用 updateProfile 函式。IE：

  // 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>
)

}

uj5u.com熱心網友回復：

在 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 })

標籤：javascript 反应 火力基地 firebase-存储

上一篇：mux.Vars無法從httpTest請求中檢索var

下一篇：如何撤銷按欄位值排序的檔案索引？