为什么我的上传到 Cloudinary 有效，但没有更新数据库？

Question

我正在尝试将文件上传到 Cloudinary 并将此文件保存到 MongoDb 数据库。上传正常（我可以在我的 Cloudinary 帐户中看到新图像），但数据库未更新。后端是用 Express 构建的。这是我的代码：

反应函数：

const { user, updateUser } = useContext(AuthContext)
const [imageUrl, setImageUrl] = useState("")

const navigate = useNavigate()

useEffect(() => {
    axios
        .get(`${API_URL}/users/user/${user._id}`)
        .then(response => {
            const { imageUrl } = response.data
            setImageUrl(imageUrl)
        })
        .catch(err => console.log(err))
}, [user._id])

const handleFileUpload = e => {
    e.preventDefault()
    const uploadData = new FormData()

    uploadData.append("imageUrl", e.target.files[0])

    service
        .uploadImage(uploadData)
        .then(res => {
            setImageUrl(res.secure_url)
        })
        .catch(err => console.log(err))
}

const handleSubmit = e => {
    e.preventDefault()

    const requestBody = { imageUrl }

    if (imageUrl === "") {
        return
    }

    axios
        .put(`${API_URL}/users/edit-picture/${user._id}`, requestBody)
        .then(res => {
            updateUser(res.data)
            navigate("/my-account")
        })
        .catch(err => console.log(err))
}

JSX：

<Form
    onSubmit={handleSubmit}
>
    <Input
        type="file"
        id="imageUrl"
        onChange={handleFileUpload}
    />

    <Button type="submit">Send</Button>
</Form>

updateUser函数：

const updateUser = updatedUser => {
    localStorage.setItem("user", JSON.stringify(updatedUser))
    setUser(JSON.parse(localStorage.getItem("user")))
}

上传图片功能：

const uploadImage = file => {
    return axios
        .put(`${API_URL}/users/upload-picture`, file)
        .then(res => res.data)
        .catch(errorHandler)
}

对于后端（其中 fileUploader 是 Cloudinary 配置文件）：

router.put(
    "/upload-picture",
    fileUploader.single("imageUrl"),
    (req, res, next) => {
        if (!req.file) {
            next(new Error("No file uploaded"))
            return
        }

        res.json({ secure_url: req.file.path })
    }
)

router.put("/edit-picture/:id", (req, res, next) => {
    const { imageUrl } = req.body
    const id = req.params.id

    console.log(id)

    User.findByIdAndUpdate(id, { imageUrl }, { new: true })
        .then(updatedUser => {
            res.status(200).json(updatedUser)
        })
        .catch(err => next(err))
})

感谢您的帮助！

Answer 1

您的 mongodb 连接似乎有问题

1. 检查您是否在本地运行 mongodb 是否正常运行
2. 检查您将在 express 中使用的 mongodb URL。在与 react 集成之前。检查 postman 或其他测试工具中的 API。