将表单数据发送到 graphql 服务器时出现问题

Question

我正在尝试使用 axios 将表单数据发送到 graphql 服务器：

let data = new FormData();
let img = {}
img.file = e.target.files[0];
data.append('operations', '{ "query" : "mutation($file:Upload!){createImage(input:{title: \"test\", image:$file}) {_id, title, image, pin}}"}');
data.append('map', {"0":["variables.file"]})
data.append('0', img);
axios({
          method: "post",
          url: "http://localhost:8000/pin/62310a56ca26b64f107de717/image/",
          data: data,
          headers: { "Content-Type": "multipart/form-data" },
        })
          .then(function (res) {
            console.log(res)
          })
          .catch(function(err){
            console.error(err);
     })

但我一直从我的服务器收到“在‘操作’多部分字段中无效 JSON”，即使完全相同的“操作”对象在邮递员中工作正常。有人知道怎么回事吗？

Answer 1

你的"json"确实无效...

Unexpected token t in JSON at position 64

这是因为您需要转义反斜杠以转义嵌套引号。

切勿手动创建 JSON 字符串。使用 JSON.stringify() 代替

const query = 'mutation($file:Upload!){createImage(input:{title: "test", image:$file}) {_id, title, image, pin}}';

data.append("operations", JSON.stringify({ query }));

您通常也不需要手动设置 content-type headers 除非您从 Node 后端发出请求。有关详细信息，请参阅 this answer。

将表单数据发送到 graphql 服务器时出现问题

Problem sending formdata to graphql server

json

multipartform-data

graphql

axios