[iOS] Alamofire로 Multipart 이미지 통신하기 | post | Swift

사이드 프로젝트 진행 중 이미지를 서버로 업로드 해야하는 태스크가 있었다!

기존에 모든 API를 Alamofire로 통신하고 있었기 때문에 이미지 통신 역시 Alamofire로 진행했다.

 

구현은 다 해두었는데, 더 찾아보면서 적용할 내용이 있나 알아보기 위해, 나중에 다시 보기 위해 기록하려 한다. 🌝

 

 

---

 

공식 문서를 먼저 확인 보자!

https://github.com/Alamofire/Alamofire/blob/master/Documentation/Usage.md#uploading-data-to-a-server

 

공식 문서를 먼저 확인해서 참고할 만한 코드를 살펴보고 > 구글링으로 잘 정리해둔 블로그를 참고해서 구현 > 다시 공식문서 확인

요새는 기능 구현보다 학습에 더 시간을 들이고 싶어서 이런 방식으로 진행하고 있다. 

 

공식문서 예시 - Uploading Multipart Form Data

AF.upload(multipartFormData: { multipartFormData in
    multipartFormData.append(Data("one".utf8), withName: "one")
    multipartFormData.append(Data("two".utf8), withName: "two")
}, to: "https://httpbin.org/post")
    .responseDecodable(of: DecodableType.self) { response in
        debugPrint(response)
}

확인해보면 multipartFormData에 데이터를 담은 클로저를 전달하고, to에 URL을 담아주면 된다는 사실을 알 수 있다.

 

upload 메서드에 사용되는 전체 파라미터는 다음과 같다.

func upload(
	multipartFormData: @escaping (MultipartFormData) -> Void, 
    to url: URLConvertible, 
    usingThreshold encodingMemoryThreshold: UInt64 = MultipartFormData.encodingMemoryThreshold, 
    method: HTTPMethod = .post, 
    headers: HTTPHeaders? = nil, 
    interceptor: RequestInterceptor? = nil, 
    fileManager: FileManager = .default, 
    requestModifier: RequestModifier? = nil 
) -> UploadRequest

 

실제 구현에 사용한 코드를 확인해보자

func postImage(challengeId: Int, challengeName: String, image: UIImage) async throws -> AwsImage {	
    let url = "https://www.tistory.com/"
    
    // API 요청부분을 확인해서 헤더를 만들어주자
    let headers: HTTPHeaders = [
        "accept": "application/json",
        "Content-Type": "multipart/form-data"
    ]
    
    // 메서드의 파라미터로 받은 image를 jpeg압축해주자
    let jpgImageData = image.jpegData(compressionQuality: 0.2) ?? Data()
    
    // 이미지와 정보를 담아 upload 수행
    let response = await AF.upload(
    	multipartFormData: { multipartFormData in
        	// Int 값을 보낼 때
        	multipartFormData.append(Data(String(challengeId).utf8),
                         withName: "challengeId")
            // String 값을 보낼 때    
            multipartFormData.append(Data(challengeName.utf8),
                         withName: "challengeName")
            // Data로 변환한 Image 값 보낼 때
        	multipartFormData.append(jpgImageData,
                                 withName: "file",
                                 fileName: "image.png",
                                 mimeType: "image/jpeg")}, 
        to: url, method: .post, headers: headers)
    .serializingDecodable(AwsResponse<AwsImage>.self) // 디코딩할 모델
    .response

    // response의 결과에 따라 분기처리
    // 400~500번대의 에러일 경우 디코딩한 응답에서 에러 메시지를 가져오기 위해 아래와 같이 작성
    switch response.result {
    case.success(let res):
        if (400..<599).contains(response.response?.statusCode ?? 0) {
            throw CustomError.invalidRequest(res.errMessage)
        }
        return res.data
    case.failure(let error):
        throw CustomError.invalidRequest(res.errMessage)
    }
}

 

 

유의하세요 🚗

- 헤더에 "Content-Type": "multipart/form-data"를 명시해줘야 서버에서 정상적으로 데이터를 처리할 수 있다.

- multipart 통신에서는 일반적으로 String, Int, Double등의 자료형으로 데이터를 보내는 것이 아니라, Data형식으로 보내야 한다.

 

 

이미지 압축 부분

image.jpegData(compressionQuality: 0.2) ?? Data()

 

compressionQuality 숫자가 0에 가까울수록 많이 압축하여 데이터 크기는 작아지며, 화질이 떨어진다.

compressionQuality 숫자가 1에 가까울수록 조금 압축하여 데이터 크기는 비교적 크며, 화질은 유지된다.

 

0.2로 압축하고 서버에 전송한 다음 다시 불러와 확인했을 때 촬영한 이미지(서버에 올릴 이미지)가 500kb(서버에서 제한한 값)가 넘지 않고 글자를 확인할 수 있을 정도의 화질이었기 때문에 해당 값으로 해두었다.

jpegData()가 nil일 경우에 Data()를 기본값으로 하는 게 아닌 아래 로직이 실행되지 않도록 수정해야겠다..!

 

이미지를 여러장 업로드할 경우

for문으로 이미지 배열 [uiImage]을 돌면서 multipartFormData에 append해주면 된다.