Express设置uploads文件夹为静态资源失效问题求助

说明：我已尝试过类似问题的解决方案，但均未解决我的问题，因此再次发帖求助，感谢理解。

各位好！我尝试访问后端backend/uploads目录中上传的图片，该文件夹已被设置为静态资源，但无法在浏览器中正常访问。

相关代码 #

uploadRoutes.js #

const path = require("path");
const express = require("express");
const multer = require("multer");
const router = express.Router();

const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, "backend/uploads/");
  },
  filename(req, file, cb) {
    cb(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
    );
  },
});

function checkFileType(file, cb) {
  const filetypes = /jpg|jpeg|png/;
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  const mimetype = filetypes.test(file.mimetype);
  if (extname && mimetype) {
    return cb(null, true);
  } else {
    cb("Images only!");
  }
}

const upload = multer({
  storage,
  fileFilter: function (req, file, cb) {
    checkFileType(file, CB);
  },
});

router.post("/", upload.single("image"), (req, res) => {
  req.file.size = req.file.size / 1000;
  res.send(req.file);
});

module.exports = router;

server.js #

app.use(
  "/uploads",
  express.static(path.join(path.resolve(), "backend/uploads"))
);

问题截图 #

排查与解决建议 #

• 修复multer大小写错误：upload配置的fileFilter中，调用checkFileType时传的CB是大写，实际应为小写cb，这个错误会直接导致文件上传失败，目录里没有文件自然无法访问，修改后才能正常上传文件。
• 验证静态资源物理路径：在server.js中打印path.join(path.resolve(), "backend/uploads")的结果，确认该路径和图片实际存放的物理路径完全一致。
• 调整中间件挂载顺序：确保express.static的挂载代码在所有路由（包括uploadRoutes）之前，避免请求被其他路由提前拦截。
• 检查目录权限：确认backend/uploads目录有读写权限，服务器进程能正常写入和读取该目录下的文件。
• 使用正确的访问路径：上传后的图片访问路径应为http://你的服务地址/uploads/文件名，不要包含backend前缀。

内容的提问来源于stack exchange，提问作者Syed Sibteali Baqar