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

Question

我的网站上有一个处理文件上传的页面，但自从我升级了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;

Answer 1

有一个顶级函数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])

查看Upload files with Cloud Storage on Web 上的文档。