React表单Base64图片提交Node.js后端遇431错误的解决咨询

• 优先方案：将Base64数据移至请求体而非请求头
  你大概率是把Base64字符串放在请求头里了，而Base64编码会让图片体积膨胀约30%，很容易超出服务器的请求头大小限制。直接把Base64数据放在POST请求的body中即可：

  // React前端示例
  axios.post('/api/register', {
    username: 'your-username',
    email: 'your-email',
    avatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...' // 放在请求体里
  })
  

• 更优方案：改用FormData上传原始文件
  Base64本身存在体积冗余，用FormData上传原生文件更高效，还能避免编码带来的体积问题：

  // React前端代码
  const formData = new FormData();
  formData.append('username', username);
  formData.append('email', email);
  formData.append('avatar', document.getElementById('avatar-input').files[0]);
  
  axios.post('/api/register', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
  

  后端用multer处理文件上传：

  // Node.js/Express后端代码
  const multer = require('multer');
  const upload = multer({ dest: './uploads/' }); // 临时存储目录
  
  app.post('/api/register', upload.single('avatar'), (req, res) => {
    // req.file 是上传的图片文件，req.body 是其他表单字段
    // 可将文件路径存入MySQL，或转存至云存储
    res.status(200).json({ message: '注册成功' });
  });
  

• 临时方案：调整服务器请求体/头大小限制
  如果暂时不想改上传方式，可以在Express服务器中放宽请求体的大小限制（不推荐长期用，治标不治本）：

  // Node.js/Express后端代码
  const express = require('express');
  const app = express();
  
  // 调整JSON请求体最大限制为10MB
  app.use(express.json({ limit: '10mb' }));
  // 调整URL编码请求体最大限制为10MB
  app.use(express.urlencoded({ extended: true, limit: '10mb' }));
  

• 辅助优化：前端压缩图片
  不管用Base64还是FormData，先在前端压缩图片都能减少传输体积：

  // React前端图片压缩函数
  function compressImage(file, maxSize = 800, quality = 0.7) {
    return new Promise((resolve) => {
      const img = new Image();
      img.src = URL.createObjectURL(file);
      img.onload = () => {
        const canvas = document.createElement('canvas');
        let w = img.width;
        let h = img.height;
        if (w > h && w > maxSize) {
          h *= maxSize / w;
          w = maxSize;
        } else if (h > maxSize) {
          w *= maxSize / h;
          h = maxSize;
        }
        canvas.width = w;
        canvas.height = h;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, w, h);
        resolve(canvas.toDataURL('image/jpeg', quality));
      };
    });
  }
  
  // 使用示例
  compressImage(userSelectedFile).then(compressedBase64 => {
    axios.post('/api/register', { avatar: compressedBase64 });
  });
  

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