我如何更新 cloudinary 图像 url 并保存到 nodejs 和 reactjs 的数据库中

Question

我正在创建一个图书项目，我将图书图像保存到 cloudinary 中，然后 url 保存到正在运行的 mongodb 数据库中 well.But 我在更新一本书时遇到问题，当我更新我的书时，书的 url 没有更新，控制台给我错误无法读取未定义的属性（阅读 'map'）我想用新的 url 图片更新 url 但它不起作用请任何人解决这个问题

这是我的update.js代码

module.exports.updateBook = async (req, res) => {
try {
  const { id } = req.params;
  const book = req.body;
  const singleBook = await Book.findById(id);
  // Delete Prvious Url From the Cloudinary and Reset It to the new ..
  cloudinary.v2.uploader.destroy(singleBook.image[0].filename);
  book.image = req.files.map((f) => ({
   url: f.path,
   filename: f.filename,
  }));
   console.log("Single Book ===", singleBook);
   const updateBook = await Book.findByIdAndUpdate(
    id,
    { $set: book },
    { new: true }
   );
  if (updateBook) {
    res
      .status(200)
      .json({ success: true, message: "Book Updated Successfully!" });
  } else {
     res.status(400).json({
     success: false,
     message: "Book Not Updated There Is an error!",
   });
  }
 } catch (err) {
   console.log("** Error In Update Book **", err.message);
 }
};

这是我的路由处理器

const express = require("express");
const router = express.Router();
const book = require("../controller/book");
const authenticated = require("../middleware/verifyToken");
const multer = require("multer");
const { storage } = require("../cloudinary");
const upload = multer({ storage });

// Update Book By ID
router.route("/:id").put(authenticated, upload.array("image"), book.updateBook);
module.exports = router;

这是我的reactjs更新方法

  const formik = useFormik({
   initialValues: {
    title: book?.title,
    author: book?.author,
    price: book?.price,
    description: book?.description,
    image: book?.image[0].url,
  },
validationSchema: validationSchema,
enableReinitialize: true,
    onSubmit: (values) => {
      const formData = new FormData();
      formData.append("title", values.title);
      formData.append("price", values.price);
      formData.append("description", values.description);
      formData.append("author", values.author);
      formData.append("image", values.image);
      Axios.put(`${Base_URL}/book/${id}`, values, {
        headers: {
        Authorization: authHeader(),
       },
      })
       .then((res) => {
        if (res.data.success) {
          message = res.data.message;
          setAlertContentupdate(message);
          setAlertupdate(true);
          setTimeout(() => {
           handleClose();
             navigate(`/book/${id}`);
           getBook();
           console.log("Response == ", res.data.message);
          }, 3000);
        }
      })
      .catch((err) => {
        console.log("Error ====", err.message);
       });
     },

这是我更新图书的jsx代码

 <form onSubmit={formik.handleSubmit}>
          <TextField
            name="title"
            autoFocus
            margin="dense"
            label="Book Title"
            type="text"
            fullWidth
            variant="standard"
            value={formik.values.title}
            onChange={formik.handleChange}
            error={formik.touched.title && Boolean(formik.errors.title)}
            helperText={formik.touched.title && formik.errors.title}
          />
          <TextField
            name="author"
            margin="dense"
            label="Book Author"
            type="text"
            fullWidth
            variant="standard"
            value={formik.values.author}
            onChange={formik.handleChange}
            error={formik.touched.author && Boolean(formik.errors.title)}
            helperText={formik.touched.author && formik.errors.author}
          />
          {/* File Input Field */}
          {/* Picture Input */}
          <input
            type="file"
            name="image"
            accept=".png, .jpeg, .jpg"
            onChange={(e) => {
              formik.setFieldValue("image", e.target.files[0]);
            }}
          />
          {formik.touched.image && formik.errors.image ? (
            <div style={{ color: "#e53935", fontSize: "12px" }}>
              {formik.errors.image}
            </div>
          ) : null}
          {/* Price Input Field */}
          <TextField
            name="price"
            margin="dense"
            label="Book Price"
            type="text"
            fullWidth
            variant="standard"
            value={formik.values.price}
            onChange={formik.handleChange}
            error={formik.touched.price && Boolean(formik.errors.price)}
            helperText={formik.touched.price && formik.errors.price}
          />
          <TextField
            name="description"
            margin="dense"
            label="Book Description"
            type="text"
            fullWidth
            variant="standard"
            value={formik.values.description}
            onChange={formik.handleChange}
            error={
              formik.touched.description &&
              Boolean(formik.errors.description)
            }
            helperText={
              formik.touched.description && formik.errors.description
            }
          />
          <DialogActions>
            <Button onClick={handleClose}>Cancel</Button>
            <Button type="submit">Update</Button>
          </DialogActions>
        </form>

在 formik 中，我从后端 api 获取书籍数据并将初始值放入 formik 但问题是，当我单击更新按钮时，后端编译器给我这个错误 Cannot read properties of undefined (reading 'map') 请任何人解决这个问题提前谢谢

Answer 1

所以这一行看起来像我的问题：

cloudinary.v2.uploader.destroy(singleBook.image[0].filename);

使用它实际上是在删除您的资产，因此您可能只想使用显式 API 更新它。参见 https://cloudinary.com/documentation/image_upload_api_reference#explicit

所以可能是这样的：

cloudinary.v2.uploader.explicit(singleBook.image[0].filename);

让我知道这是否有帮助？

我如何更新 cloudinary 图像 url 并保存到 nodejs 和 reactjs 的数据库中

How i can update the cloudinary image url and save into the database in nodejs and reactjs

node.js

reactjs

mongodb

cloudinary