REST API - 無法在前端獲取帖子圖片

Question

fetch時獲取不到這張圖片，想在前端顯示

exports.createPost = async (req, res, next) => {
      const errors = validationResult(req);
      if (!errors.isEmpty()) {
        const error = new Error("Validation failed, entered data is incorrect.");
        error.statusCode = 422;
        throw error;
      }
      if (!req.file) {
        const error = new Error("No image provided.");
        error.statusCode = 422;
        throw error;
      }
      const imageUrl = req.file.path;
      const title = req.body.title;
      const content = req.body.content;
      const post = new Post({
        title: title,
        content: content,
        imageUrl: imageUrl,
        creator: req.userId,
      });
      try {
        await post.save();
        const user = await User.findById(req.userId);
        user.posts.push(post);
        await user.save();
        io.getIO().emit("posts", {
          action: "create",
          post: { ...post._doc, creator: { _id: req.userId, name: user.name } },
        });
        res.status(201).json({
          message: "Post created successfully!",
          post: post,
          creator: { _id: user._id, name: user.name },
        });
      } catch (err) {
        if (!err.statusCode) {
          err.statusCode = 500;
        }
        next(err);
      }
    };

這是我的更新后代碼圖像路徑存儲絕對好面臨的問題是在前端獲取圖像在本地作品中存儲的圖像也完全存儲在 MongoDB 中的路徑...

exports.updatePost = async (req, res, next) => {
  const postId = req.params.postId;
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    const error = new Error("Validation failed, entered data is incorrect.");
    error.statusCode = 422;
    throw error;
  }
  const title = req.body.title;
  const content = req.body.content;
  let imageUrl = req.body.image;
  if (req.file) {
    imageUrl = req.file.path;
  }
  if (!imageUrl) {
    const error = new Error("No file picked.");
    error.statusCode = 422;
    throw error;
  }
  try {
    const post = await Post.findById(postId).populate("creator");
    if (!post) {
      const error = new Error("Could not find post.");
      error.statusCode = 404;
      throw error;
    }
    if (post.creator._id.toString() !== req.userId) {
      const error = new Error("Not authorized!");
      error.statusCode = 403;
      throw error;
    }
    if (imageUrl !== post.imageUrl) {
      clearImage(post.imageUrl);
    }
    post.title = title;
    post.imageUrl = imageUrl;
    post.content = content;
    const result = await post.save();
    io.getIO().emit("posts", {
      action: "update",
      post: result,
    });
    res.status(200).json({ message: "Post updated!", post: result });
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500;
    }
    next(err);
  }
};

幫助我的建議是最受歡迎的...圖像路徑存儲絕對好面對問題在前端獲取圖像存儲在本地作品中的圖像也完全存儲在 MongoDB 中的路徑...

Answer 1

由於存儲路徑的路徑問題，可能會遇到此錯誤，但一旦嘗試使用以下代碼存儲路徑，可能會出錯...

imageUrl = req.file.path.replace("\\", "/");

在插入圖像和更新圖像時......

Answer 2

exports.createPost = async (req, res, next) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    const error = new Error("Validation failed, entered data is incorrect.");
    error.statusCode = 422;
    throw error;
  }
  if (!req.file) {
    const error = new Error("No image provided.");
    error.statusCode = 422;
    throw error;
  }
  const imageUrl = req.file.path.replace("\\", "/");
  const title = req.body.title;
  const content = req.body.content;
  const post = new Post({
    title: title,
    content: content,
    imageUrl: imageUrl,
    creator: req.userId,
  });
  try {
    await post.save();
    const user = await User.findById(req.userId);
    user.posts.push(post);
    await user.save();
    io.getIO().emit("posts", {
      action: "create",
      post: { ...post._doc, creator: { _id: req.userId, name: user.name } },
    });
    res.status(201).json({
      message: "Post created successfully!",
      post: post,
      creator: { _id: user._id, name: user.name },
    });
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500;
    }
    next(err);
  }
};

它對我有用，感謝您從創建和更新圖像路徑中完成