REST API - 无法在前端获取 Post 图像答案

【问题标题】：REST API - Can't fetch Post image in front endREST API - 无法在前端获取 Post 图像
【发布时间】：2021-09-27 22:15:48
【问题描述】：

当我获取并想在前端显示时无法获取此图像

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 中完全存储路径......

【问题讨论】：

标签： node.js mongodb express mongoose

【解决方案1】：

可能因为存储路径的路径问题而面临此错误，但一旦尝试以下代码存储路径可能会出错...

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

在插入图片和更新图片时...

【讨论】：

【解决方案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);
  }
};

它对我有用，感谢您从创建和更新图像路径完成

【讨论】：