如何解决MERN 上传照片到 Cloudinary 然后更新用户
我可以成功将照片上传到 Cloudinary,但无法更新用户。我的用户路由状态为 200,但没有任何变化。我无法弄清楚这是否是前端或后端请求异步的问题。我的一些 console.logs 只在第二次点击时记录输出。将上传链接到 cloudinary 并将更新链接到前端的用户是否正确?如何在上传后进行更新?
// UploadPhoto.js
const UploadPhoto = ({user}) => {
const [fileInput,setFileInput] = useState('')
const [previewSource,setPreviewSource] = useState()
const [imageUrl,setimageUrl] = useState('')
const [message,setMessage] = useState('')
const [submittedToCloudinary,setSubmittedToCloudinary] = useState(false)
const handleFileChange = e => {
const file = e.target.files[0]
previewFile(file)
}
const previewFile = file => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = () => {
setPreviewSource(reader.result)
}
}
const handleSubmit = e => {
e.preventDefault()
if (!previewSource) return;
uploadImage(previewSource)
}
const uploadImage = theImage => {
axios.post('/api/user/photo/upload',{data: theImage})
.then((res) => {
setMessage(res.data.msg)
setimageUrl(res.data.secure_url)
setSubmittedToCloudinary(true)
})
.then((res) => {
console.log('check here if cloudinary image url',imageUrl) // no then yes on second click
axios.put(`/api/user/photo/${user._id}`,{imageUrl: imageUrl}
)
.catch(err => console.log(err))
})
.catch(err => console.log(err))
}
// user.js route
router.post('/photo/upload/',async (req,res) => {
const {data} = req.body
const uploadResponse = await cloudinary.uploader.upload(data,{
upload_preset: 'ml_default'
})
.catch((err) => {
console.log(err)
res.status(500).json({err: "error 500"})
})
res.json({ msg: 'done ',secure_url: uploadResponse.secure_url });
})
// photo => user
router.put('/photo/:id',(req,res,next) => {
const {imageUrl} = req.body
console.log('backend imageurl only shows if you click submit a second time: ',imageUrl)
User.findByIdAndUpdate(req.params.id,imageUrl,{new: true },(err,user) => {
if (err) return next(err)
res.json(user)
})
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。