파일 업로드 질문

Question

안녕하십니까 혹시 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, }, })

노원두 · Answer

안녕하세요! rjs2517 님! 포스트맨에서 파일업로드 당시, 단순히 파일만 업로드한 것이 아니라 header에 추가했던 내용 들도 있었어요! 이러한 부분까지 입력되어야 올바르게 전송될 수 있답니다!^^

인프런 AI 인턴 · Answer

안녕하세요 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를 요청의 데이터로 넘기고, &lsquo;Content-Type&rsquo; 헤더를 &lsquo;multipart/form-data&rsquo;로 설정해야 합니다. 또한, query 변수에 파일 변수를 설정하여 업로드할 파일을 graphql 스키마에 맞게 전달해야 합니다. 이렇게 설정을 하면 클라이언트에서 graphql과 함께 이미지 업로드를 할 수 있습니다. 추가로 사용하고 계신 라이브러리나 환경에 따라 설정이 다를 수 있으니 참고하여 사용해보시기 바랍니다. 질문이 있으시면 언제든지 물어보세요. 감사합니다!