微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何使用 Busboy (React) 将 base64 图像上传到 firebase?

如何解决如何使用 Busboy (React) 将 base64 图像上传到 firebase?

我在裁剪后无法将图像上传数据库。我可以在 Postman 上上传文件,但在裁剪并将其作为 base64 返回后不知道该怎么做。

这是我上传原始文件而不是 base64 的路径:

exports.uploadProfileMedia = (req,res) => {
    const BusBoy = require("busboy")
    const path = require("path")
    const os = require("os")
    const fs = require("fs")

    let mediaFileName
    let mediaToBeUploaded = {}
    let generatedToken = uuidv4()

    const busboy = new BusBoy({ headers: req.headers })

    busboy.on("file",(fieldname,file,filename,encoding,mimetype) => {
        console.log(file,"before")
        if (
            mimetype !== "image/jpeg" &&
            mimetype !== "image/png" &&
            mimetype !== "image/heic"
        ) {
            return res.status(400).json({ error: "Wrong file type submitted" })
        }

        const mediaExtension = filename.split(".")[
            filename.split(".").length - 1
        ]
        mediaFileName = `${Math.round(
            Math.random() * 100000000000
        ).toString()}.${mediaExtension}`
        const filepath = path.join(os.tmpdir(),mediaFileName)
        mediaToBeUploaded = { filepath,mimetype }

        file.pipe(fs.createWriteStream(filepath))
        console.log(file,"after")
    })

    busboy.on("finish",() => {
        admin
            .storage()
            .bucket()
            .upload(mediaToBeUploaded.filepath,{
                resumable: false,Metadata: {
                    Metadata: {
                        contentType: mediaToBeUploaded.mimetype,firebaseStorageDownloadTokens: generatedToken
                    }
                }
            })
            .then(() => {
                const mediaUrl = `https://firebasestorage.googleapis.com/v0/b/${firebaseConfig.storageBucket}/o/${mediaFileName}?alt=media&token=${generatedToken}`
                return db
                    .doc(`/users/${req.user.username}`)
                    .update({ mediaUrl })
            })
            .then(() => {
                return res
                    .status(201)
                    .json({ message: "Media uploaded successfully" })
            })
            .catch((err) => {
                console.error(err)
                return res.status(500).json({ error: err.code })
            })
    })

    busboy.end(req.rawBody)
}

这是我在裁剪后传入 base64 的地方:

    const uploadProfileMedia = (formData) => {
        axios.defaults.headers.common["Authorization"] = localStorage.getItem(
            "FBIdToken"
        )
        axios
            .post("/api/user/media",formData)
            .then((res) => {})
            .catch((err) => console.log(err))
        console.log(formData,"form")
    }

这是上面console.log()的一个片段:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDREN

这是调用uploadProfileMedia()的函数

const showCroppedImage = useCallback(async () => {
        console.log(imageSrc,"imgsrc")
        try {
            const croppedImage = await getCroppedImg(
                imageSrc,croppedAreaPixels
            )
            setCroppedImage(croppedImage)
            uploadProfileMedia(croppedImage)
            console.log(croppedImage,"showcroppedImage")
        } catch (e) {
            console.error(e)
        }
    },[imageSrc,croppedAreaPixels])

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。