reactjs 当我尝试导入文件在firebase存储时,我得到错误

oxalkeyp  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(116)

我一直试图从firebase存储导入文件,但我得到错误,我已经阅读了文档,也读了一些博客,但仍然是同样的错误。我只是在寻找最好的方式去做这件事

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 };

我尝试导入文件,并阅读了一些文档,但没有通过工作

elcex8rz

elcex8rz1#

您的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)
                //...

相关问题