Express项目中使用Multer上传商品图片后出现Requested URL not found错误的问题排查求助

我帮你排查出几个核心问题，导致图片明明上传成功却无法在页面加载：

1. 文件存储路径与静态服务路径不匹配 #

你的Multer配置把文件存在了../uploads（项目根目录的上级文件夹），但server.js里的静态资源服务指向的是项目根目录下的uploads文件夹。这就导致静态服务根本找不到实际存储的图片文件。

修改方案：
先在项目根目录手动创建uploads文件夹，然后调整Multer的存储路径：

// uploadRoutes.js
const storage = multer.diskStorage({
  destination(req, file, cb) {
    // 用path.resolve确保路径绝对正确（适配不同操作系统）
    cb(null, path.resolve(__dirname, "../uploads"));
  },
  filename(req, file, cb) {
    cb(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
    );
  },
});

2. 上传接口返回的路径无效 #

当前上传接口返回的是/${req.file.path}，也就是类似../uploads/image-1625831584164.png的路径。前端拿到这个路径后，会请求/../uploads/xxx.png，这显然不是合法的URL路径，浏览器会解析成错误的地址。

修改上传接口的返回逻辑：
直接返回静态服务对应的访问路径：

// uploadRoutes.js
router.post("/", upload.single("image"), (req, res) => {
  // 返回格式：/uploads/文件名.png，对应静态服务的映射路径
  res.send(`/uploads/${req.file.filename}`);
});

3. 静态服务配置重复且需统一 #

你的server.js里有两行静态服务配置，保留第二行即可（更清晰地映射URL路径到文件夹）：

// server.js
// 删掉这一行重复配置
// app.use(express.static("./uploads"));

// 只保留这一行，明确把/uploads路径映射到项目根目录的uploads文件夹
app.use("/uploads", express.static(path.join(__dirname, "/uploads")));

4. updateProduct控制器的逻辑错误 #

你的更新接口里有重复的product.save()调用，会导致重复执行数据库操作，甚至可能触发重复响应的错误：

// productController.js
exports.updateProduct = async (req, res, next) => {
  try {
    const { name, price, description, image, brand, category, countInStock } = req.body;
    const product = await Product.findById(req.params.id);

    if (product) {
      product.name = name;
      product.price = price;
      product.description = description;
      product.image = image; // 这里的image就是上传接口返回的/uploads/xxx.png
      product.brand = brand;
      product.category = category;
      product.countInStock = countInStock;

      const updatedProduct = await product.save();
      res.json(updatedProduct);
    } else {
      const error = new Error("Product not Found!");
      error.status = 404;
      next(error);
    }
    // 删掉下面这两行重复的代码！
    // const createdProduct = await product.save();
    // res.status(201).json(product);
  } catch (error) {
    next(error);
  }
};

最后验证步骤 #

1. 重启服务器
2. 重新上传一张商品图片，确认返回的路径是/uploads/xxx.png
3. 更新商品信息，把这个路径存入数据库
4. 打开商品详情页，图片就能正常加载了

内容的提问来源于stack exchange，提问作者Ankush Dogra