上传图片到GraphCMS时报Error 400错误的问题排查与解决求助

AI 小北

2026-10-10

GraphCMS Base64图片上传400错误解决方案

核心错误原因

请求头配置错误：当请求体为FormData类型时，你手动设置了Content-Type: application/x-www-form-urlencoded，这会直接导致服务端无法解析表单数据。浏览器/Node运行环境发送FormData时会自动生成包含boundary分隔符的multipart/form-data请求头，无需手动指定。
FormData参数不全：仅将Buffer传入form.append无法被GraphCMS识别为合法上传文件，需要补充文件名、MIME类型两个参数，满足接口的文件校验规则。
Base64前缀清理不完整：现有正则仅匹配png、gif、jpeg三种格式，前端允许上传的webp格式未被覆盖，会导致base64前缀清理不干净，转换后的图片Buffer损坏。

修复后的后端代码

// 需提前安装form-data依赖：npm install form-data
const FormData = require('form-data');

const { image } = req.body;

// 匹配提取图片MIME类型和纯Base64内容，覆盖所有允许的图片格式
const mimeReg = /^data:(image\/(png|gif|jpeg|webp));base64,/;
const [prefix, mimeType] = image.match(mimeReg);
const pureBase64 = image.replace(prefix, '');

const imgBuffer = Buffer.from(pureBase64, 'base64');

const form = new FormData();
// 追加文件时补充文件名和MIME类型配置
form.append('fileUpload', imgBuffer, {
  filename: `upload_${Date.now()}.${mimeType.split('/')[1]}`,
  contentType: mimeType
});

const response = await fetch(`${process.env.GRAPH_DOMAIN}/upload`, {
  method: 'POST',
  headers: {
    authorization: '你的授权Token',
    // 自动生成FormData所需的正确请求头，无需手动设置Content-Type
    ...form.getHeaders()
  },
  body: form
});

// 后续响应处理逻辑