當我嘗試在 firebase 存儲上導入文件時出現錯誤

Question

我一直在嘗試從 firebase 存儲中導入文件，但我收到錯誤我已經閱讀了文檔並閱讀了一些關於它的博客，但仍然是同樣的錯誤。 我只是在尋找有關此問題的最佳方式 go

import { storage } from '../Firebase/firebase';
import { getStorage, ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";

async function storeImage(image){
            return new Promise((resolve, reject)=>{
                const storage = getStorage()
                const filename = `${auth.currentUser.uid}-${image.name}-${uuidv4()}`
                const storageRef = ref(storage, filename)
                const uploadTask = uploadBytesResumable(storageRef, file);
                uploadTask.on('state_changed', 
                    (snapshot) => {
            // Observe state change events such as progress, pause, and resume
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
            switch (snapshot.state) {
            case 'paused':
                console.log('Upload is paused');
                break;
            case 'running':
                console.log('Upload is running');
                break;
            }
        }, 
        (error) => {
            // Handle unsuccessful uploads
            reject(error)
        }, 
        () => {
            // Handle successful uploads on complete
            // For instance, get the download URL: https://firebasestorage.googleapis.com/...
            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
              resolve(downloadURL);
            });
        }
        );
                    })

            }

        
        const ImgUrl = await Promise.all(
            [...images].map((image)=>storeImage(image)).catch((error)=>{
                setLoading(false);
                toast.error("images cannot be uploaded")
                return;
            })
        )
        console.log(ImgUrl)
        
        

         
    }

這是我的配置文件已導入但無法正常工作

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
   piKey: "AIzaSyBBP9H3mLn7Nz8NeCo4Rve87YszflMshZ8",
  authDomain: "realtor-e7363.firebaseapp.com",
  projectId: "realtor-e7363",
  storageBucket: "realtor-e7363.appspot.com",
  messagingSenderId: "960865969593",
  appId: "1:960865969593:web:9fde225122d9555ec00268",
};

// Use this to initialize the firebase App
// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();
const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);
export { auth, db };

我試過導入文件並閱讀了一些文檔，但沒有成功

Answer 1

您的 Firebase 配置文件需要進行如下調整（另請參閱文檔）：

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  //...
};


const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

export { auth, db, storage };

---

此外，您不需要再次使用getStorage如下

import { storage } from '../Firebase/firebase';
import { getStorage, ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";

async function storeImage(image){
            return new Promise((resolve, reject)=>{
                const storage = getStorage()
                //...
                const storageRef = ref(storage, filename)
                //...

做就是了：

import { storage } from '../Firebase/firebase';
import { ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";

async function storeImage(image){
            return new Promise((resolve, reject)=>{
                const storageRef = ref(storage, filename)
                //...