인프런 커뮤니티 질문&답변
작성한 질문수
HTTP API에서의 파일 전송에 대해 궁금한 것이 있습니다.
작성
·
779
0
JSON 요청-응답을 통한 조작을 하는 서버를 개발하고 싶은데, 회원 프로필같이 사진파일을 전송해야 하는 경우가 생기는데 이러한 부분을 어떻게 처리하는 것이 좋을지 모르겠습니다.
예를 들어 저는 Vue와 같은 프레임워크에 axios로 ajax 요청을 보내서 multipart/form-data 형식으로 파일을 보내고 싶은데 이렇게 보낸 요청에 대한 결과를 JSON으로 받아도 괜찮고, 가능한건가요??
또 반대로 프로필 사진을 받는 요청을 한다고 가정했을때, 일반적으로 JSON으로 통신하는 API서버로 구축을 했을 때 파일은 어떤 방식으로 내려받아야 되는건지 궁금합니다. 파일을 받는 메커니즘이 따로 있는건가요??
가장 헷갈리는 부분은 HTTP API로 구현했을때의 파일전송 관련한 부분입니다.
답변 1
3
안녕하세요. ㅈㅇㄱ님, 공식 서포터즈 OMG입니다.
저는 Vue와 같은 프레임워크에 axios로 ajax 요청을 보내서 multipart/form-data 형식으로 파일을 보내고 싶은데 이렇게 보낸 요청에 대한 결과를 JSON으로 받아도 괜찮고, 가능한건가요??
네, 가능합니다. 예시로 든 회원 프로필의 경우 회원별 이미지가 다르기 때문에 데이터베이스에 회원별 프로필 이미지와 관련된 정보가 들어갈텐데, DB에는 회원별 이미지가 저장된 경로를 저장해 놓으시면 됩니다.
또 반대로 프로필 사진을 받는 요청을 한다고 가정했을때, 일반적으로 JSON으로 통신하는 API서버로 구축을 했을 때 파일은 어떤 방식으로 내려받아야 되는건지 궁금합니다. 파일을 받는 메커니즘이 따로 있는건가요??
마찬가지로 DB에는 이미지가 저장된 경로가 있을텐데요, JSON 응답시 이미지가 저장된 경로를 반환하여 예를들어, <img src="이미지가 저장된 경로"> 와 같이 이미지를 불러오시면 됩니다. 지금 ㅈㅇㄱ님이 보고 계시는 인프런 우측 상단의 나뭇잎 프로필도 우클릭하게 되면 "이미지복사", "이미지 주소 복사"가 있는데요, img 태그를 사용하고 있으며 클라우드에 저장되어 있는 개인별 프로필 이미지에 대한 주소를 담고 있는 JSON 데이터를 응답으로 내려줘서 사용하고 있지 않나 생각합니다.
감사합니다.