MERN 上传照片到 Cloudinary 然后更新用户

编程问答 2022-05-12

问题描述

我可以成功将照片上传到 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 (将#修改为@）

cloudinarymernreactjsreactjsreactjsreactjs