如何解决MERN项目上传表单与图片时出现的Cannot POST错误

问题原因及修改方案 #

1. 后端路由实例定义错误 #

auth.js中错误将express实例当成路由实例创建，导致路由无法正常挂载到主服务：

// 错误写法
const router = express()
// 修正为路由实例创建方式
const router = express.Router()

2. POST路由语法错误 #

路由处理回调被错误写在post方法的参数括号外，导致请求没有对应处理逻辑，直接返回404（即你看到的Cannot POST错误）：

// 错误写法：upload.fields后多了右括号，回调没有传入post方法
router.route('/teacher').post(upload.fields([{
    name: "photo", maxCount: 1
}, {
    name: "photoone", maxCount: 1
}
])), (req, res) => {
  // 处理逻辑
}

// 修正写法：把回调放入post方法的参数中
router.route('/teacher').post(upload.fields([
    {name: "photo", maxCount: 1},
    {name: "photoone", maxCount: 1}
]), (req, res) => {
  // 处理逻辑
})

3. 多文件读取方式错误 #

使用upload.fields上传多文件时，文件会挂载到req.files对象上，req.file仅在单文件上传upload.single场景下可用：

// 错误写法
const photo = req.file.filename
const photoone = req.file.filename
// 修正写法
const photo = req.files.photo[0].filename
const photoone = req.files.photoone[0].filename

4. 前后端跨端口请求配置 #

如果你的前端、后端分别运行在不同端口（比如前端默认3000、后端5000），直接写url: "/teacher"会默认请求到前端端口，找不到后端接口，两种解决方案：

• 方法一：axios请求补全后端完整地址

  url: "http://localhost:5000/teacher"
  

• 方法二：前端项目package.json中添加代理配置

  "proxy": "http://localhost:5000"
  

额外检查项 #

1. 确认你的Teacher模型（userSchemaTeacher）已经定义了school/photo/photoone/address四个字段，类型匹配、没有设置未传的必填项
2. 保持前端表单中school输入框的位置在两个文件上传框之前，确保multer处理文件时可以正常读取到req.body.school生成存储目录

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