Question

我希望这个问题的答案可能非常简单。

因此，我正在基于MongoDB，Node，Express，React等创建一个应用程序，但是我无法弄清楚在用户上传头像后如何正确设置和显示该头像。

我有一个可供上传的头像的API端点，当遇到请求时成功上传该头像。（在具有中间件支持的情况下），我还将其正确存储在MongoDB中。事情是目前看起来像这样，我很确定它不应该这样：

处于Redux状态：

avatar(pin): "C:\Users\Kuba\Desktop\mern_project\client\public\avatars\uploads\profileAvatar-1558374898723.jpeg"

所以上传图像的路径应该如何，这样我就可以在React中成功显示它（如果有帮助的话，可以使用create-react-app构建）。我应该在哪个文件夹中存储上传的图像？

这是我的默认头像路径，效果很好，但它只是通过React组件中的import实现的。

avatar(pin): "/static/media/template-avatar2.173d1842.svg"

Project structure image

客户端是route / api / profile.js中的前端API端点

感谢您的帮助。

下面是路线

  router.post(
  "/avatar",
  passport.authenticate("jwt", { session: false }),
  upload.single("avatar"),
  (req, res) => {
    const errors = {};

// Path to the avatar is in req.file.path
if (!req.file.path) {
  errors.avatar = "Wrong file format";
  return res.status(404).json(errors);
}
const avatarPath = req.file.path;

Profile.findOne({ user: req.user.id })
  .then(profile => {
    if (profile) {
      Profile.findOneAndUpdate(
        { user: req.user.id },
        { $set: { avatar: avatarPath } },
        { new: true }
      )
        .then(profile => {
          res.json(profile);
        })
        .catch(err => res.json(err));
    } else {
      errors.noprofile = "Couldn't find the profile";
      res.status(404).json(errors);
    }
    errors.noprofile = "Couldn't find the profile";
  })
  .catch(err => res.status(404).json(errors));

} ）;

多人设置

const multer = require("multer");

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "./client/src/img/uploads/avatars");
  },
  filename: (req, file, cb) => {
    cb(
      null,
      file.fieldname + "-" + file.filename + "." + file.mimetype.slice(6)
    );
  }
});

const fileFilter = (req, file, cb) => {
  if (file.mimetype === "image/jpeg" || file.mimetype === "image/png")
    cb(null, true);
  else {
    // reject a file
    let errors = {};
    cb(
      new Error(
        (errors.avatar = "Wrong filetype, only png and jpg types are eligible")
      ),
      false
    );
  }
};

// Upload avatar middleware
const upload = multer({
  storage,
  limits: {
    fileSize: 1024 * 1024 * 2
  },
  fileFilter
});

编辑：好的，我将Multer中的路径更改为相对路径，现在看起来像这样，仍然不起作用。

avatar(pin): "client\src\img\uploads\avatars\avatar-undefined.png"

Answer 1

最终解决了这个问题，因此，如果有人遇到相同的问题，我会发布答案。

解决方案实际上有点愚蠢，但它可以正常工作...

显然，为了使图像在create-react-app中显示，它们必须存储在“ client / public”中，并且这是根目录的起始位置。

因此我将multer中的目标目录更改为：

"./client/public/images/uploads/avatars"

由于根目录以public开头，因此在我的情况下，路径必须以“ / images / ...”开头。因此，在存储到数据库之前，我只剪切了前15个字符-整个“ ./client/public”。

纠正图像路径以在Express React（create-react-app）的前端正确显示图像

1 个答案: