图像未从 Nginx 服务器显示

Question

我在 Nginx 服务器上上传了我的 Node 后端应用程序。服务器 IP 也正常工作。我正在使用 base 64 格式上传图像。我正在以 URL 格式将图像存储在数据库中。即 ip/imageName。它在本地主机上成功运行。

例如，http:localhost:8000/imageName

这是我在控制器文件中的图像上传代码/api：

exports.editProfileImg = async (req, res) => {
  console.log("req.body.. ", req.body);
  let imagePath;
  let base64Data;

  function myFunction(length, chars) {
    var mask = "";
    if (chars.indexOf("a") > -1) mask += "abcdefghijklmnopqrstuvwxyz";
    if (chars.indexOf("A") > -1) mask += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if (chars.indexOf("#") > -1) mask += "0123456789";
    var result = "";
    for (var i = length; i > 0; --i)
      result += mask[Math.floor(Math.random() * mask.length)];
    return result;
  }
  var randomNumber = myFunction(25, "#aA");
  var data = req.body.profilePic.split(";");
  if (data[0] == "data:image/1") {
    imagePath = "./uploads/" + randomNumber + ".png";
    base64Data = req.body.profilePic.replace(/^data:image\/1;base64,/, "");
  } else if (data[0] == "data:image/*") {
    var base64 = data[2].split(",");
    base64Data = base64[1];
    var data = base64[1].substring(0, 8);
    if (data == "/9j/4AAQ") {
      imagePath = "./uploads/" + randomNumber + ".jpeg";
    } else {
      imagePath = "./uploads/" + randomNumber + ".png";
    }
  } else if (data[0] == "data:image/png") {
    imagePath = "./uploads/" + randomNumber + ".png";
    base64Data = req.body.profilePic.replace(/^data:image\/png;base64,/, "");
  } else if (data[0] == "data:image/jpeg") {
    imagePath = "./uploads/" + randomNumber + ".jpeg";
    base64Data = req.body.profilePic.replace(/^data:image\/jpeg;base64,/, "");
  } else {
    console.log("image invalid");
  }
  fs.writeFile(imagePath, base64Data, "base64", async function (err) {
    if (err) {
      console.log("err: ", err);
      res.json({
        success: false,
        message: "Base64 Image is not converted",
        data: err,
      });
    } else {
      const imageUrlPath =
        "http://198.199.74.223" + imagePath.split("./uploads")[1];

      console.log("imageUrlPath ", imageUrlPath);
      user
        .findOne({ _id: req.body.userId })
        .lean()
        .exec((error, loginUser) => {
          if (loginUser) {
            if (loginUser.profilePic) {
              console.log("old pic ", loginUser.profilePic);
              const getImgName = loginUser.profilePic.split("//");

              if (fs.existsSync("./uploads/" + getImgName[2])) {
                let filePath = "./uploads/" + getImgName[2];
                fs.unlinkSync(filePath);

                user.findByIdAndUpdate(
                  { _id: req.body.userId },
                  {
                    $set: {
                      profilePic: imageUrlPath,
                    },
                  },
                  { new: true },
                  (e1, newUser) => {
                    if (e1) {
                      return;
                    }

                    res.json({
                      code: 200,
                      status: "success",
                      data: newUser,
                    });
                  }
                );
              } else {
                if (loginUser) {
                  user.findByIdAndUpdate(
                    { _id: req.body.userId },
                    {
                      $set: {
                        profilePic: imageUrlPath,
                      },
                    },
                    { new: true },
                    (e1, newUser) => {
                      if (e1) {
                        return;
                      }

                      res.json({
                        code: 200,
                        status: "success",
                        data: newUser,
                      });
                    }
                  );
                } else {
                  res.json({
                    code: 400,
                    status: "err",
                    message: "No user found",
                  });
                }
              }
            } else {
              user.findByIdAndUpdate(
                { _id: req.body.userId },
                {
                  $set: {
                    profilePic: imageUrlPath,
                  },
                },
                { new: true },
                (e1, newUser) => {
                  if (e1) {
                    return;
                  }

                  res.json({
                    code: 200,
                    status: "success",
                    data: newUser,
                  });
                }
              );
            }
          } else {
            res.json({
              code: 400,
              status: "err",
              message: "No user found",
            });
          }
        });
    }
  });
};

在主 index.js 文件中：

app.use(express.static(path.join(__dirname, "uploads")));

app.use("/api/user", userRoute);

这是我的 nginx 配置：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root/ver/www/html/debate/frontend/build;
    index index.html;

    location /api {
      proxy_pass http://198.199.74.223:8000;
    }
}

我认为有些事情是矛盾的。我是不是在哪里弄错了？

Answer 1

你可以这样设置它对我有用

location / {
  root /path/to/website/public;
  index index.html;
   try_files $uri $uri/ @express; # instead of 404, proxy back to express using a named location block;
}
location @express {
  proxy_pass http://localhost:8080;
}

请点击此链接，它对您有帮助。 Express + Nginx. Can't serve static files