客户端上传头像遇413错误（Payload Too Large）如何解决？

问题根源 #

你当前代码仅配置了json和urlencoded类型请求的大小限制，但文件上传采用的是multipart/form-data格式，bodyParser无法处理该格式；同时express.json()默认限制偏小，且中间件顺序存在问题。

具体修复方案 #

1. 安装并配置multer处理文件上传 #

文件上传需用multer专门处理multipart/form-data请求，还可设置文件大小限制。

• 先安装multer：

npm install multer

• 修改server.js，引入并配置multer：

const express = require('express');
const cookieParser = require('cookie-parser');
const multer = require('multer');
const app = express();

// 配置multer：设置存储路径和文件大小限制（此处设为50MB）
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/'); // 确保uploads文件夹已创建
  },
  filename: function (req, file, cb) {
    // 自定义文件名，添加时间戳避免重复
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop());
  }
});

const upload = multer({ 
  storage: storage,
  limits: { fileSize: 50 * 1024 * 1024 }, // 50MB大小限制
  fileFilter: function (req, file, cb) {
    // 仅允许图片格式
    const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
    if (allowedTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('仅允许上传JPG、PNG格式的图片'));
    }
  }
});

// 调整中间件顺序：静态文件服务前置，避免干扰其他路由
app.use("/", express.static("uploads"));
app.use(express.json({ limit: '50mb' })); // 给express.json添加大小限制
app.use(cookieParser());
// Express 4.16+已内置bodyParser功能，无需重复配置
// app.use(bodyParser.json({ limit: '50mb' }));
// app.use(bodyParser.urlencoded({ limit: '50mb', extended: true, parameterLimit: 50000 }));

// 在接收上传的路由中使用multer的single方法，对应前端input的name="profile"
app.post('/signup', upload.single('profile'), (req, res) => {
  // req.file即为上传的文件信息
  console.log('上传的文件:', req.file);
  // 后续业务逻辑
  res.status(200).json({ message: '文件上传成功', file: req.file });
});

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

前端input已设置name='profile'，提交时需用FormData发送请求，示例handleFileInputChange逻辑如下：

const handleFileInputChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('profile', file);
    // 发送请求至后端
    fetch('/signup', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));
  }
};

3. 检查反向代理配置（若有） #

如果应用前端部署了Nginx等反向代理，需在配置文件中调整client_max_body_size，比如在nginx.conf或对应站点配置中添加：

client_max_body_size 50M;

修改后重启Nginx生效。

关键注意点 #

• 不要同时使用express.json()和bodyParser.json()，Express 4.16+已内置bodyParser功能，重复配置易引发冲突。
• 中间件顺序很重要，静态文件服务需放在前面。
• 务必确保uploads文件夹存在，否则multer会抛出错误。

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