下一个 js 应用程序中 formData 的“操作"多部分字段中的 JSON 无效? [英] Invalid JSON in the ‘operations’ multipart field in formData in next js application?

问题描述

我有一个这样的突变-

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

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

For this I have sent a request from next js application like this-

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 无效

Now I am getting error like - Invalid JSON in the ‘operations’ multipart field

但我不明白我在操作"json 中的错误.请帮帮我.

But I can't understand where I am wrong in 'operation' json. Please help me.

提前致谢.

推荐答案

我正在从 几乎重复的问题以防万一被关闭:

I'm copying my answer here from the almost-duplicate question in case that one gets closed:

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

If you have quotes inside quotes and you want to run JSON.parse on it, you have to escape them (as others have mentioned). However, in your follow-up duplicate, you can't just single escape the quotes. You have to double- or triple-escape them.

解释如下:

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

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

When this gets parsed by JavaScript (because it's inside single quotes), it takes the \" and realizes you're trying to escape them (unnecessarily, since it wasn't a single quote), so it converts it into ". Now the parser sees the value inside the quotes (escaped):

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

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

As you can see, the syntax highlighter changes colors halfway through, because the quotes were already escaped.

要获得所需的输出，您必须使 FIRST 字符串处理以反斜杠结尾，因此您也必须转义反斜杠:

To get the desired output, you have to make the FIRST string processing end up with backslashes in it, so you have to escape THE BACKSLASHES too:

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

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

Now the question is if you need TWO backslashes or THREE. The answer here is that since your OUTER string uses single quotes, you don't need to ALSO escape the double quotes inside, so you only need two backslashes for every double quote you want to keep. If you were using double quotes for your outer string, you'd have to triple escape instead of just double, or your quote wouldn't also get escaped, and the original string would be invalid.

经验法则:如果您要转义字符串使用的相同类型的引号，请使用三重转义.如果你想转义不同的类型，双重转义.

Rule of thumb: if you're trying to escape the SAME type of quote you're using for your string, triple escape. If you're trying to escape a different type, double escape.

这篇关于下一个 js 应用程序中 formData 的“操作"多部分字段中的 JSON 无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！