向Express.js后端上传图片时遭遇404 Not Found错误

你的404错误核心原因集中在上传路由的配置逻辑或请求处理环节，以下是具体排查和修复步骤：

1. 检查imageUpload.js的路由定义 #

确保该文件正确创建并导出Express Router，且包含POST路由处理逻辑。示例正确代码如下：

const express = require('express');
const router = express.Router();
// 必须引入multer处理文件上传（body-parser.json无法解析multipart/form-data）
const multer = require('multer');

// 配置文件存储路径和文件名规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './images/'); // 确保项目根目录存在images文件夹
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
const upload = multer({ storage: storage });

// 注意：这里路径是'/'，因为已经通过app.use("/upload", ...)挂载了前缀
router.post('/', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: '未选择上传文件' });
  }
  res.status(200).json({ 
    message: '文件上传成功', 
    filePath: `/images/${req.file.filename}` 
  });
});

module.exports = router;

如果你的imageUpload.js里没有上述POST路由、路径写错（比如写成/upload），或未导出Router，都会导致404。

2. 确认前端请求格式正确 #

Angular上传图片必须用FormData格式，不能直接传JSON。示例前端代码：

uploadImage(file: File): Observable<any> {
  const formData = new FormData();
  formData.append('image', file); // 这个key要和后端multer的upload.single('image')一致
  return this.http.post('http://localhost:3000/upload', formData);
}

如果前端用JSON格式发送请求，后端无法解析，会导致路由匹配异常。

3. 检查依赖是否安装 #

Express本身不处理文件上传，必须安装multer：

npm install multer --save

未安装multer会导致路由无法正确响应上传请求。

4. 验证路由加载状态 #

在Server.js中添加日志，确认imageUploadRouter是否正确加载：

const imageUploadRouter = require('./imageUpload.js');
console.log('图片上传路由加载状态:', imageUploadRouter); // 新增日志
app.use("/upload", imageUploadRouter);

如果控制台输出undefined，说明文件路径错误（比如文件名拼写错误、不在同一目录），或文件未正确导出Router。

5. 确保images文件夹存在 #

后端配置了静态文件服务app.use('/images', express.static('images'));，需在项目根目录手动创建images文件夹，否则multer保存文件时会报错，影响上传功能。

内容的提问来源于stack exchange，提问作者Akhilesh Rao