Next.js应用发GraphQL上传请求报operations字段JSON无效如何解决

• 核心报错原因是operations字段的JSON字符串存在语法错误：你手动拼接JSON时，query字段的字符串内部直接使用了未转义的双引号包裹name、email等参数值，JSON解析器会把这些内部双引号识别为query字符串的结束标记，导致整个JSON结构断裂，无法正常解析。
• 附加错误：axios配置中的Headers拼写错误，必须为全小写的headers，否则请求头配置不会生效。

优先选择JS对象序列化方案，避免手动拼接JSON时的转义错误，修正后代码如下：

// 先构造operations对应的JS对象
const operations = {
  query: `mutation($file: Upload!) {
    signUp(avatar: $file, input: {
      name: "Siam Ahnaf",
      email: "siamahnaf198@yahoo.com",
      password: "siam1980"
    }){
      message
      token
    }
  }`,
  variables: { file: null }
}

var formData = new FormData();
// 用JSON.stringify自动处理转义
formData.append('operations', JSON.stringify(operations));
formData.append('map', JSON.stringify({ "0": ["variables.file"] }));
// 确保此处的Image是合法的File/Blob对象
formData.append('0', Image);

await axios({
  url: "http://localhost:3001/graphql",
  method: "post",
  data: formData,
  // 修正Headers拼写为小写headers，上传文件时不需要手动加Content-Type，浏览器会自动生成带boundary的正确值
  headers: {
    'Accept': 'application/json'
  }
})
.then(response => console.log(response))
.catch(error => console.log(error));

• 确保代码中的Image变量是用户上传获取的合法File/Blob类型对象，否则文件上传依然会失败。
• 不需要手动给axios添加Content-Type: multipart/form-data请求头，浏览器会自动生成带正确分隔符（boundary）的请求头，手动添加反而会导致请求解析失败。

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