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

Posted 2023-03-22

【中文标题】使用 Firebase v9 将文件从网站上传到 Firebase 存储

【英文标题】：File upload from website to Firebase storage using Firebase v9

【发布时间】：2022-01-12 15:17:34

【问题描述】：

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

【参考方案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 上的文档。

【讨论】：

我确实阅读了文档，但我不明白如何更新我的代码。

@PazzeG 你能像我的回答那样尝试更新你的useEffect 吗？

也许我不能异步功能？一件好事是我把它放在我的存储设备上

@PazzeG 这里的所有功能都不需要等待...

谢谢我真的很感激 =)！