使用Firebase v9将文件从网站上传到Firebase存储

Question

我在我的网站上有一个处理文件上传的页面，但是自从我升级了Firebase（我猜是Firebase v7/8）后，这个特殊的功能不再工作了。

为了在firebase存储中处理文件上载，我创建了一个自定义钩子，在这里我使用useffect，因为每次有新的文件值时都需要运行它。我为试图上载的文件传递了一个参数（文件），并将其存储在数据库中，这样数据库就包含了所有图像的url。然后，我使用这些数据将图像加载到react组件中。

我得到的错误是：

未捕获类型错误：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;

Answer 1

我是这样加的

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

但是得到了一个错误未捕获（在promise）参考：快照没有定义

Answer 2

有一个顶级函数uploadByteResubable（）可以在监视进度的同时上载文件。尝试重构代码，如下所示：

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

在Web上使用云存储上传文件时检查留档。