使用JavaScript Fetch发送大Base64图片负载至NodeJS失败问题求助

Hey there! Let's break down why your larger image upload is failing and fix it step by step.

问题根源 #

你的核心问题出在Express的express.json()中间件默认大小限制上：

• Base64编码会让文件体积增加约33%，81.7KB的图片转成Base64后大概是108KB左右
• Express的express.json()中间件默认只允许100KB的请求体，超过这个大小的请求会被自动截断，导致后端解析Base64字符串失败

快速修复方案 #

给express.json()加上和其他中间件一致的大小限制配置，修改你的Node.js路由代码：

// 原代码
router.use(express.json()); 

// 修改后
router.use(express.json({ limit: '50mb' }));

这样就能允许最大50MB的JSON请求体，完全覆盖你的图片需求。

额外优化建议 #

1. 清理不必要的中间件 #

你当前使用的router.use(imageupload({ limits: { fileSize: 50 * 1024 * 1024 }, }));看起来像是Multer这类文件上传中间件，但你是手动解析Base64字符串，这个中间件其实没起到作用，反而可能造成不必要的开销，可以考虑移除它。

2. 改用FormData直接上传文件（更高效） #

Base64上传不仅体积更大，处理也更繁琐。推荐改用FormData直接上传文件，这样能避免Base64的体积膨胀问题，也更符合文件上传的最佳实践：

前端修改uploadFile函数：

async function uploadFile() {
  const fileInput = document.querySelector('.file-upload-input');
  if (!fileInput.files || fileInput.files.length === 0) {
    alert('Please select an image first!');
    return;
  }

  const formData = new FormData();
  formData.append('image', fileInput.files[0]);

  try {
    const response = await fetch('http://localhost:3030/image/uploadimage', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    console.log('Success:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

后端改用Multer处理上传：

首先安装Multer：npm install multer，然后修改路由代码：

const multer = require('multer');
const path = require('path');
const fs = require('fs');

// 配置Multer存储
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    const uploadDir = path.join(__dirname, '../public/uploads/');
    // 确保上传目录存在
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir, { recursive: true });
    }
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    const extension = path.extname(file.originalname);
    const newImageName = `image-${Math.random().toString(36).substring(7)}${extension}`;
    cb(null, newImageName);
  }
});

const upload = multer({ 
  storage: storage,
  limits: { fileSize: 50 * 1024 * 1024 },
  fileFilter: function (req, file, cb) {
    // 只允许图片文件
    if (!file.mimetype.startsWith('image/')) {
      return cb(new Error('Only image files are allowed!'));
    }
    cb(null, true);
  }
});

router.post('/uploadimage', cors(corsOptions), upload.single('image'), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ status: 'error', message: 'No image uploaded' });
    }
    console.log('The file was uploaded successfully');
    return res.status(200).json({ status: 'success', message: 'File uploaded successfully' });
  } catch (err) {
    console.log(err);
    return res.status(500).json({ status: 'error', message: err.message });
  }
});

这样的方案更高效、更稳定，也更容易维护。

内容的提问来源于stack exchange，提问作者SouravMishra-MSFT