如何上傳SVG張圖片到firebase存儲？

Question

我在將 SVG 圖像上傳到 firebase 存儲時遇到問題。 當我嘗試單擊鏈接時，上傳似乎可以正常工作。 它按照下面的屏幕截圖返回空的錯誤文件。

請看下面我上傳的function

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

export const uploadToFirebase = async (file) => {
    const storage = getStorage()
    const storageRef = ref(storage, "images/avatar.svg")
    const metadata = {
        contentType: "image/svg+xml",
    }
    const uploadTask = uploadBytesResumable(storageRef, file, metadata)
    uploadTask.on(
        "state_changed",
        (snapshot) => {
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
            console.log("Upload is " + progress + "% done")
            switch (snapshot.state) {
                case "paused":
                    console.log("Upload is paused")
                    break
                case "running":
                    console.log("Upload is running")
                    break
            }
        },
        (error) => {
            // A full list of error codes is available at
            // https://firebase.google.com/docs/storage/web/handle-errors
            switch (error.code) {
                case "storage/unauthorized":
                    // User doesn't have permission to access the object
                    break
                case "storage/canceled":
                    // User canceled the upload
                    break

                // ...

                case "storage/unknown":
                    // Unknown error occurred, inspect error.serverResponse
                    break
            }
        },
        () => {
            // Upload completed successfully, now we can get the download URL
            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
                console.log("File available at", downloadURL)
            })
        }
    )
}

我在我的家庭組件中稱這個 function 作為伙伴

 useEffect(() => {
        uploadToFirebase("../public/avatar.svg")
    }, [])

有人可以幫我理解我的代碼有什么問題嗎？

Answer 1

您將一個字符串傳遞給您的uploadToFirebase()方法，這會導致使用一個字符串作為第二個參數調用uploadBytesResumable()方法。

如文檔（上方鏈接）中所述，第二個參數應為 Blob、Uint8Array 或 ArrayBuffer。

---

按照我們的以下評論：我不是 reactjs 中的詩句，但您需要從公共文件夾中獲取圖像作為Blob Object（或作為File Object，這是“一種特定類型的 Blob” ）並將其傳遞給您的uploadToFirebase()方法。 以下SO 問題和答案提供了幾種方法（未經測試）。