创建存储引用以将图像上传到 Google Firebase

Question

我目前正在处理一个使用过时版本的 Firebase 的旧项目，并将其迁移到最新的模块化版本。按照 Firebase 网站上的文档进行操作后，除了我的项目的以下功能外，我已经能够完成大部分工作：允许登录用户上传照片。

除了我的 handleUpload 函数外，一切正常，如下所示：

const handleUpload = () => {
    const uploadTask = storage.ref('images/${image.name}').put(image);
    uploadTask.on(
        "state_changed",
        (snapshot) => {
            //Progress function ... (shows the load bar)
            const progress = Math.round(
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100
            );
            setProgress(progress);
        },
        (error) => {
            //Error Function...
            console.log(error);
            alert(error.message);
        },
        () => {
            //complete function
            storage.ref("images").child(image.name).getDownloadURL()
            .then(url => {
                db.collection("posts").add({
                    timestamp: serverTimestamp,
                    caption: caption,
                    imageUrl: url,
                    username: username
                });
                setProgress(0);
                setCaption("");
                setImage(null);
            })
            

        }
    )
}

我似乎无法让这部分工作，因为我在将旧的 firebase 语法转换为较新的模块化版本时遇到问题。我已尝试通过执行 const storageRef = ref(storage, 'some-child'); 之类的操作来遵循在线文档，但其余的仍然无法正常工作。

关于如何解决这个问题或使用更新的语法该函数应该是什么样子有什么想法吗？

Answer 1

同样的Modular版本应该是这样的：

首先使用ref()创建一个StorageReference。
然后使用 uploadBytesResumable() 创建一个 UploadTask。请注意，如果您想监控上传进度，则不能使用 uploadBytes()。

除此之外，.on() 侦听器中的功能与 V8 相同。

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage(app);
const handleUpload = () => {
  const storageRef = ref(storage, `images/${image.name}`);

  const uploadTask = uploadBytesResumable(storageRef, image);

  uploadTask.on(
    "state_changed",
    (snapshot) => {
      //Progress function ... (shows the load bar)
      const progress = Math.round(
        (snapshot.bytesTransferred / snapshot.totalBytes) * 100
      );
      // setProgress(progress);
    },
    (error) => {
      //Error Function...
      console.log(error);
    },
    async () => {
      //complete function
      // const url = await getDownloadURL(storageRef)
    }
  )
}

然后添加一个文件你需要使用addDoc()函数如下所示：

import { getFirestore, collection, addDoc } from "firebase/firestore"; 

const db = getFirestore();

const docRef = await addDoc(collection(db, "posts"), {...data});

另请查看此答案以了解 Firestore 语法更改的更多详细信息：

创建存储引用以将图像上传到 Google Firebase

Creating a storage reference to upload a image to Google Firebase

javascript

firebase

reactjs

firebase-storage