使用 nextjs 应用程序中的 axios 将文件上传到 graphql api 服务器时我错在哪里？

Posted 2023-03-08

【中文标题】使用 nextjs 应用程序中的 axios 将文件上传到 graphql api 服务器时我错在哪里？

【英文标题】：Where I am wrong when uploading file to graphql api server using axios from nextjs application?

【发布时间】：2021-12-02 13:44:36

【问题描述】：

我正在构建下一个 js 应用程序。我想使用 axios 将文件上传到 graphql 服务器。但是我收到了像图像一样的错误-

但我不明白我错在哪里。请帮帮我。

这里是上传功能-

import Image from "assets/Hero-bg.jpg"

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));

这里是突变查询

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

请帮助我。我有很多天至少2个月的问题。我还不能解决。

【参考方案1】：

我认为你是错误的 maltipart json 格式。多部分 json 格式无效。要查看实际错误，请单击网络选项卡，然后查看您面临的错误类型。如果您面临无效的 json 多部分格式。只需更改此代码并重试-

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: 
            'Content-Type': 'application/json'
        
    )
        .then(response => console.log(response))
        .catch(error => console.log(error));