我在我的網站上有一個頁面，我在其中處理檔案上傳，但自從我升級Firebase（我猜是Firebase v7/8）后，這個特殊功能就不再起作用了。
為了處理 firebase 存盤中的檔案上傳，我創建了一個自定義掛鉤，我在其中使用 ，useEffect 因為每次有新檔案值時我都需要它運行。我file為要上傳的檔案傳遞了一個引數 ( ) 并將其存盤在資料庫中，這樣資料庫就包含了所有影像的 url。然后我使用資料在反應組件中加載影像。
我得到的錯誤：
未捕獲的型別錯誤：projectStorage.ref 不是函式
因為我在上，Firebase v9所以我對此有點困惑，不知道要改變什么。謝謝你的幫助，我真的很感激=）。
useStorage.jsx（自定義鉤子）
import {projectStorage, projectFirestore, timestamp} from '../Firebase'
import { useEffect, useState } from 'react'
function useStorage(file) {
const [progress, setProgress] = useState(0);
const [error, setError] = useState(null);
const [url, setUrl] = useState(null);
useEffect(() => {
const storageRef = projectStorage.ref(file.name)
const collectionRef = projectFirestore.collection('images');
storageRef.put(file).on('state_changed', (snap) => {
let percent = (snap.bytesTransferred / snap.totalBytes) * 100;
setProgress(percent >> 0); // or Math.trunc()
}, (err) => {
setError(err);
}, async () =>{
const url = await storageRef.getDownloadURL();
const createdAt = timestamp();
collectionRef.add({ url, createdAt});
setUrl(url);
});
}, [file]);
return {progress, url, error};
}
export default useStorage;
uj5u.com熱心網友回復：
有一個頂級功能uploadBytesResumable()可以在監控進度的同時上傳檔案。嘗試重構代碼，如下所示：
import {projectStorage, projectFirestore, timestamp} from '../Firebase'
import { ref as storageRef, uploadBytesResumable } from "firebase/storage";
useEffect(() => {
// Creating a storage reference
const storageReference = storageRef(projectStorage, file.name);
// Creating an upload task
const uploadTask = uploadBytesResumable(storageReference, file);
// Monitoring upload progress
uploadTask.on("state_changed", (snapshot: any) => {
console.log(snapshot);
// render progress
});
}, [file])
查看有關使用 Cloud Storage on Web 上傳檔案的檔案。
uj5u.com熱心網友回復：
我這樣添加
uploadTask.on("state_changed", (snapshot) => {
console.log(snapshot);
let percent = (snap.bytesTransferred / snap.totalBytes) * 100;
setProgress(percent >> 0);
}, (err) => {
setError(err);
}, async () =>{
const url = await storageRef.getDownloadURL();
const createdAt = timestamp();
collectionRef.add({ url, createdAt});
setUrl(url);
});
但得到了一個錯誤未捕獲（承諾）RefErr：snap is not defined
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/375508.html
標籤：javascript 反应 火力基地 上传文件 火力存储