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

Question

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

为了处理 firebase 存储中的文件上传，我创建了一个自定义挂钩，我在其中使用了 useEffect，因为每次有新文件值时我都需要它运行。我为要上传的文件传递了一个参数 (file) 并将其存储在数据库中，这样数据库就包含了所有图像的 url。然后我使用数据在反应组件中加载图像。

我遇到的错误：

Uncaught TypeError: projectStorage.ref is not a function

因为我在 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 上的文档。

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

File upload from website to Firebase storage using Firebase v9

javascript

reactjs

firebase

file-upload

firebase-storage