서버를 개발하다 보니 파일과 json데이터들을 함께 전송해야 하는 경우들이 생긴다 서버에 파일과 함께 정보를 업로드하는 방법이 여러가지 있다.
mutilpart/from-data
multipart는 MIME type이 개별적인 파트로 나누어지는 것을 말한다. request의 body에 여러 가지의 content_type을 담고 싶을 때 사용하게 된다. 그렇다보니 장고에서 일반적으로 사용하던 request.body는 사용할 수 없게 된다.
request.FILES['키값']으로 파일들을 통신할 수 있고request.POST['키값']으로 파일이 아닌 json 데이터 등을 통신할 수 있다.
👉🏻 포스트맨이나 httpie로 integration test를 진행할 때도 파일은 파일대로, json 데이터는 텍스트화해서 따로 보내게 된다.
mutilpart/from-data에서도 서버에 전송하는 방법이 두가지 있다.
첫번째 방법은
프론트로부터 multipart/form-data로 받되, 첨부파일과는 별개로, 다른 텍스트 데이터들은
프론트에서 json데이터로 변환한 뒤 multipart/form-data 내부에 json 데이터를 넣은 형식으로 보내주는 것
두번째 방법은
첨부파일은 multipart/form-data로, 다른 텍스트 데이터들은 그냥 json 형식으로 2번의 요청을 통해 각각 넘겨받도록 하는 것
mutilpart/from-data 활용한 데이터 전송 방법은 구현이 쉽지만 파일과 함께 전달된 데이터가 연관이 있는경우, 별도의 처리가 필요하다. 또한 포스트맨을 테스트할때도 너무 불편하다ㅜㅜ또한 form-data형식은 첨부파일 형식을 제공하는 대신에 데이터 파싱에 어려움을 겪는다.
파일과 JSON데이터를 별도로 업로드
이 방법은 각자 파일을 만드는 api하고 json데이터를 업로드하는 api로 업로드할때마다 두번의 api요청을 하는 방법이다. 이 방법은 이미지에 대한 특별한 처리가 필요한 경우 특화시킬 수 있다. 그러나 앞에서 말한 것처럼 api요청을 두번이나 해야하므로 추가작업이 필요하다.
base64 인코딩 이후 JSON 객체로 전송
이 방법은 파일을 base64 인코딩하여 Json 객체에 포함시켜 전송하는 방법이다.
전체로직
프런트에서 이미지를 base64로 인코딩해서 서버에 요청 -> 서버가 인코딩된 파일을 디코딩해서 데이터베이스에 저장
이 방법을 사용하면 한꺼번에 json데이터로 요청을 보낼수 있다는 장점을 지니고 있다. 그러나 base64 인코딩하면 string의 길이가 길어져 서버측에서 파일을 읽지 못하는 문제가 발생한다. 따라서 인코딩할때 더 최적화 하거나 길이를 줄여서 보내야 한다.
이번에 개발하면서 json 텍스트들하고 이미지를 같이 전송하는 api를 개발했는데 처음에는 mutilpart/from-data으로 개발했다. 근데 그렇게 개발하다 보니 한꺼번에 이미지와 json데이터들을 한꺼번에 보내는 게 더 좋을 것 같아서 base64 인코딩 이후 JSON 객체로 전송하는 방법을 사용하여 개발하게 되었다. 다음 포스트에서는 base64 인코딩 이후 JSON 객체로 전송하는 방법에 대해 더 자세히 소개해보겠다!
