问题描述
我在裁剪后无法将图像上传到数据库。我可以在 Postman 上上传文件,但在裁剪并将其作为 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
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 (将#修改为@)