IOS 학과별 커뮤니티 개발 - 8

이번에는 사진에 대해 업로드하고 가져오는 개발을 진행했습니다!!

 

이를 위해 multipartFormData에 대해 공부하고 개발해보는 시간을 가졌습니다 ㅎㅎ

 

2023.11.10 ~ 2023.11.16

 

프론트엔드, 백엔드 간 데이터 통신 구축 이미지 업로드 기능, 이미지 데이터 변환, 통신을 진행했습니다!!

 

멀티파트를 사용하여 이미지를 포함한 데이터를 서버로 전송하였습니다.

기존에 사용하던 URLSession이 아니라, Alamofire라는 통신 라이브러리를 사용하여 이미지 통신을 구현했습니다.

multipartFormData

멀티파트 폼 데이터는 HTTP 요청에서 여러 종류의 데이터를 함께 전송하는 방법 중 하나 입니다. 다른 팀원이 진행하는 엑셀 파일 업로드, 저의 이미지 업로드 동일 한 방식으로 데이터 통신을 진행하였습니다.

 

multipart/form-data는 웹 폼(form) 데이터를 웹 서버로 전송하기 위한 인터넷 미디어 타입 중 하나입니다. 이 타입은 주로 파일 업로드와 함께 사용되며, 텍스트 데이터뿐만 아니라 바이너리 데이터(파일 등)를 함께 전송할 수 있도록 해줍니다.

 

multipart/form-data는 HTTP 프로토콜의 일부로 정의되어 있으며, HTML 폼에서 enctype 속성을 이용하여 지정됩니다.

기본적으로 application/x-www-form-urlencoded는 텍스트 데이터를 인코딩하는 데 사용되며, 파일과 같은 바이너리 데이터를 처리하기에는 적합하지 않습니다. 이러한 이유로 multipart/form-data가 도입되었습니다.

multipart/form-data를 사용하는 경우, HTTP 요청 본문은 여러 개의 부분(part)으로 나뉘어져 있습니다. 각 부분은 MIME(Multipurpose Internet Mail Extensions) 형식으로 구성되어 있으며, 각 부분은 고유한 이름을 가질 수 있습니다.

 

Swift에서는 URLSession/Alamofire을 이용하여 multipartFormData를 생성하고 전송할 수 있습니다. 이를 통해 서버에 파일과 텍스트 데이터를 함께 전송할 수 있게 됩니다.

구현

이미지의 업로드 갯수 제한은 5개로 두었고, 여러 데이터 유형을 하나의 HTTPS 요청으로 전송하였습니다.
5개의 이미지 파일을 반복문을 통해 pngData 형식으로 변환하였고, multipartFormData에 한 이미지 데이터씩 append하였습니다.

이렇게 만들어진 multipartData를 POST 형식으로 이미지 파일을 전송하고 Response로 imageURL, imageName을 받아 추가로 게시글을 업 로드 할때, 통신을 한 번 더 진행했습니다!!

 

 

 

구현 코드
GitHub :
https://github.com/Creative-Semester/ios

GitHub - Creative-Semester/ios

참고자료(출처) :
https://velog.io/@lwb112/iOS-multipartform-data-사용해보기
https://www.youtube.com/@dev_jeongdaeri
야곰(Swift5) 교재

개발하는 정대리

[iOS] multipart/form-data 사용해보기