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

Question

我有一个像这样的突变-

mutation signUp($avatar: Upload!) {
  signUp(
    avatar: $avatar
    input: { 
      name: "Siam Ahnaf"
      email: "siamahnaf198@aol.com"
      password: "12345678" }
  ) {
    message
    token
  }
}

为此，我已经从下一个 js 应用程序发送了这样的请求-

var formData = new FormData();
    formData.append('operations', '{ "query": "mutation($file: Upload!) {signUp(avatar: $file, input: {name: "Siam Ahnaf", email: "siamahnaf198@yahoo.com", 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

但是我不明白我在'operation'json哪里错了。请帮助我。

提前致谢。

Answer 1

我正在从 the almost-duplicate question 复制我的答案，以防有人关闭：

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

解释如下：

'{ "query": "mutation($file: Upload!) {signUp(avatar: $file, input: {name: \"Siam Ahnaf\", email: \"siamahnaf198@yahoo.com\", password: \"siam1980\"}){message, token}}", "variables": { "file": null } }'

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

{ "query": "mutation($file: Upload!) {signUp(avatar: $file, input: {name: "Siam Ahnaf", email: "siamahnaf198@yahoo.com", password: "siam1980"}){message, token}}", "variables": { "file": null } }

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

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

'{ "query": "mutation($file: Upload!) {signUp(avatar: $file, input: {name: \"Siam Ahnaf\", email: \"siamahnaf198@yahoo.com\", password: \"siam198\"}){message, token}}", "variables": { "file": null } }'

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

经验法则：如果您要转义与您用于字符串的相同类型的引号，请进行三次转义。如果你想转义不同的类型，双重转义。

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

Invalid JSON in the ‘operations’ multipart field in formData in next js application?

javascript

graphql-js

apollo-server

next.js