下一个 js 应用程序中 formData 的“操作”多部分字段中的 JSON 无效？

Posted 2023-03-08

【中文标题】下一个 js 应用程序中 formData 的“操作”多部分字段中的 JSON 无效？

【英文标题】：Invalid JSON in the ‘operations’ multipart field in formData in next js application?

【发布时间】：2021-12-04 03:53:03

【问题描述】：

我有一个这样的突变-

mutation signUp($avatar: Upload!) 
  signUp(
    avatar: $avatar
    input:  
      name: "Siam Ahnaf"
      email: "[e-mail]"
      password: "12345678" 
  ) 
    message
    token
  

为此，我从下一个 js 应用程序发送了一个请求，如下所示-

var formData = new FormData();
    formData.append('operations', ' "query": "mutation($file: Upload!) signUp(avatar: $file, input: name: "Siam Ahnaf", email: "[e-mail]", password: "siam1980")message, token", "variables":  "file": null  ');
    formData.append('map', ' "0": ["variables.file"] ');
    formData.append('0', Image);
    await axios(
        url: "http://localhost:3001/graphql",
        method: "post",
        data: formData,
        Headers: 
            'Accept': 'application/json'
        
    )
        .then(response => console.log(response))
        .catch(error => console.log(error));

现在我收到类似错误 - “操作”多部分字段中的 JSON 无效

但我不明白我在“操作”json 中哪里错了。请帮帮我。

提前谢谢。

【问题讨论】：

尝试 console.logging ' "query": "mutation($file: Upload!) signUp(avatar: $file, input: name: "Siam Ahnaf", email: "[e-mail]", password: "siam1980")message, token", "variables": "file": null ' 并确保它是有效的 json。也许通过JSON.parse

解析它

您传递给 operations 的值不是有效的 JSON 字符串。尝试转义 query 值内的双引号。

你能描述更多细节吗

将operations 值替换为' "query": "mutation($file: Upload!) signUp(avatar: $file, input: name: \"Siam Ahnaf\", email: \"[e-mail]\", password: \"siam1980\")message, token", "variables": "file": null '。

@juliomalves 它仍然无法正常工作。

【参考方案1】：

我从the almost-duplicate question 复制我的答案，以防万一被关闭：

如果引号中有引号并且您想在其上运行JSON.parse，则必须转义它们（正如其他人提到的那样）。但是，在您的后续副本中，您不能只转义引号。您必须对它们进行两次或三次转义。

解释如下：

' "query": "mutation($file: Upload!) signUp(avatar: $file, input: name: \"Siam Ahnaf\", email: \"[e-mail]\", password: \"siam1980\")message, token", "variables":  "file": null  '

当它被 javascript 解析时（因为它在单引号内），它接受 \" 并意识到你正在尝试转义它们（不必要，因为它不是单引号），所以它将它转换为"。现在解析器看到引号内的值（转义）：

 "query": "mutation($file: Upload!) signUp(avatar: $file, input: name: "Siam Ahnaf", email: "[e-mail]", password: "siam1980")message, token", "variables":  "file": null  

如您所见，语法高亮显示中途会改变颜色，因为引号已被转义。

要获得所需的输出，您必须使第一个字符串处理以反斜杠结束，因此您也必须转义反斜杠：

' "query": "mutation($file: Upload!) signUp(avatar: $file, input: name: \\"Siam Ahnaf\\", email: \\"[e-mail]\\", password: \\"siam198\\")message, token", "variables":  "file": null  '

现在的问题是您需要两个反斜杠还是三个。这里的答案是，由于您的 OUTER 字符串使用单引号，因此您不需要也转义内部的双引号，因此您只需要为要保留的每个双引号使用两个反斜杠。如果您对外部字符串使用双引号，则必须使用三重转义而不是双引号，否则您的引号也不会被转义，并且原始字符串将无效。

经验法则：如果您要转义用于字符串的相同类型的引号，请三重转义。如果您尝试转义不同的类型，请双重转义。

【讨论】：

完成！我很高兴我哭了。我在这个问题上待了 20 天。没有人能帮助我。你是一个很好的人。为了寻求解决方案，我在堆栈溢出中提出了近 6 个问题，在 dev.io 中提出了 10 个问题，在 github 中提出了 8 个问题。但是，即使是 graphql-upload 和 apollo 服务器的开发人员，也没有人帮助我。非常感谢。你现在是我的老板了。