創建存盤參考以將影像上傳到GoogleFirebase-有解無憂

我目前正在使用一個使用過時版本的 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');但其余的仍然無法正常作業。

關于如何解決這個問題或使用較新語法的函式應該是什么樣子的任何想法？

uj5u.com熱心網友回復：

相同的模塊化版本應如下所示：

首先使用ref()創建一個StorageReference。
然后創建一個UploadTaskusing uploadBytesResumable()。請注意，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 語法更改的更多詳細資訊：

Firestore：在 Web v9 中添加新資料的模式是什么？

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402448.html

標籤：

上一篇：onclick已識別，但onchange未識別

下一篇：更改懸停時顯示的影像并單擊