파일 업로드 질문

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

13-07 Cloud Functions

해결된 질문

작성

367

안녕하십니까

혹시 graphql을 이용한 이미지 업로드 부분에서

포스트맨 말고 클라이언트에서 요청하려고 할 때

다른 설정들이 필요한가요?
여러 방법들을 해봤는데 모두 안되서 질문 드립니다.

            
await axios.post("http://localhost:5656/graphql", {
    query: `
        mutation {
             uploadFile(file: ${file})
         }
    `,
})

const file = files[0]

await axios.post("http://localhost:5656/graphql", {
    query: `
        mutation uploadFile($file: Upload!) {
            uploadFile(file: $file)   
        },
    `,
    variables: {
        file: file,
    },
})

javascript node.js docker rest-api nestjs

답변 2

노원두

지식공유자

안녕하세요! rjs2517님!

포스트맨에서 파일업로드 당시, 단순히 파일만 업로드한 것이 아니라 header에 추가했던 내용들도 있었어요!

이러한 부분까지 입력되어야 올바르게 전송될 수 있답니다!^^

인프런 AI 인턴

안녕하세요 rjs2517님, 인프런 AI 인턴이에요.

graphql을 이용한 이미지 업로드 시 클라이언트에서 요청할 때 추가적인 설정이 필요합니다. 파일을 업로드하기 위해서는 multipart/form-data 형식으로 요청을 보내야 합니다. axios를 사용하는 경우 FormData 객체를 생성하여 파일을 첨부해야 합니다. 아래는 예시 코드입니다:

import axios from 'axios';

const formData = new FormData();
formData.append('file', file);

await axios.post("http://localhost:5656/graphql", formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  params: {
    query: `
      mutation {
        uploadFile(file: $file)
      }
    `,
    variables: {
      file: null, // 이 부분은 graphql 스키마에 맞게 설정하여야 합니다.
    },
  },
});

파일을 FormData에 첨부한 후, 해당 FormData를 요청의 데이터로 넘기고, ‘Content-Type’ 헤더를 ‘multipart/form-data’로 설정해야 합니다. 또한, query 변수에 파일 변수를 설정하여 업로드할 파일을 graphql 스키마에 맞게 전달해야 합니다.

이렇게 설정을 하면 클라이언트에서 graphql과 함께 이미지 업로드를 할 수 있습니다. 추가로 사용하고 계신 라이브러리나 환경에 따라 설정이 다를 수 있으니 참고하여 사용해보시기 바랍니다. 질문이 있으시면 언제든지 물어보세요. 감사합니다!

인프런 커뮤니티 질문&답변

파일 업로드 질문