使用fetch向Node服务端上传图片返回400 Bad Request如何解决

问题根因 #

• 你传入FormData的是base64字符串，不是后端multer中间件upload.single('upload')要求的File/Blob类型对象，multer无法解析出文件，导致req.body为空
• 前端请求路径与后端路由不匹配：后端路由为/upload，前端先后写了/accounts/upload、/accounts/upload-image，路径不一致
• 后端逻辑需要读取req.body.id查询数据，但你的FormData中未传递id字段，查询失败会抛出400错误
• 你之前注释的Content-Type配置为application/json完全不符合FormData的请求类型要求，即使取消注释也会导致解析失败

修复步骤 #

1. 新增base64转File的工具函数 #

function base64ToFile(base64Str, fileName = 'upload.jpg') {
  const [header, content] = base64Str.split(',');
  const mimeType = header.match(/:(.*?);/)[1];
  const byteContent = atob(content);
  const uint8Array = new Uint8Array(byteContent.length);
  for (let i = 0; i < byteContent.length; i++) {
    uint8Array[i] = byteContent.charCodeAt(i);
  }
  return new File([uint8Array], fileName, { type: mimeType });
}

2. 修正前端上传逻辑 #

async function uploadImage(base64Image, incidentId) {
  const formData = new FormData();
  // 传入转换后的File对象
  formData.append('upload', base64ToFile(base64Image));
  // 补充后端需要的id字段，替换为你实际的业务ID值
  formData.append('id', incidentId);

  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
      // 不要手动设置Content-Type头，浏览器会自动生成带boundary的multipart/form-data头
    });
    // 后端默认返回空响应，可先转文本避免JSON解析报错，也可修改后端返回res.json({success: true})
    const result = await response.text();
    console.log('上传成功', result);
  } catch (err) {
    console.error('上传失败', err);
  }
}

3. 确认multer配置（后端） #

你需要读取req.file.buffer，必须使用内存存储配置，确认你的multer初始化代码如下：

const multer = require('multer');
// 内存存储，才会生成req.file.buffer
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

其他优化建议 #

后端保存数据时建议加await，避免异步保存未完成就返回响应：

// 原代码incident.save()改为await incident.save()
await incident.save()

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