[iOS, Swift] 이미지(파일) 서버에 업로드하기(multipart/form-data), 사진앨범(라이브러리)에서 이미지 가져오기(UIImagePickerController)

✔️ GOAL 

🩶 Step 1. 버튼 클릭 시 사진앨범(라이브러리)에 접근

  1-1. 선택한 이미지를 imageView로 보여준다.

  1-2. 선택한 이미지 혹은 카메라로 찍은 이미지를 서버에 업로드한다.

 

🩶 Step 2. 서버 통신 후 response url로 imageView에 보여준다.

---

✔️ SETTING

1. Info.plist 수정

privacy - Photo Library Usage Description, Privacy - Camera Usage Description 항목을 추가하여 사진앨범, 카메라 접근에 대한 권한을 허가 + Description에 사용하는 이유를 기재한다.

이때, 이유는 카메라, 앨범 허가 요청 알림 창에 메시지로 나오는데,

불친절한 경우, 추후 앱스토어에 앱 배포할 때, 리젝사유가 될 수 있다. 친절 + 상세하게 적을 것!

---

🩶 Step 1. 버튼 클릭 시 사진앨범(라이브러리)에 접근

1. UIImagePickerController 인스턴스 생성

UIImagePickerController는 이미지를 선택해서 가져오는 기능을 수행한다.

하지만, source type에 따라 카메라로 촬영한 사진, 라이브러리 사진, 동영상을 가져올 수 있다.

 

이 UIImagePickerController를 사용하기 위해서 아래 두 개의 델리게이트를 상속받는다.

• UIImagePickerControllerDelegate : 이미지를 선택하고 카메라를 찍었을 때 다양한 동작 수행
• UINavigationControllerDelegate : 앨범 사진을 선택했을 때, 화면 전환을 네비게이션으로 이동

UIImagePickerController 인스턴스의 delegate = self로 설정한다.

*UIImagePickerControllerDelegate의 delegate 속성은 위 두 개의 프로토콜을 모두 구현해야 하는 Protocol Composition으로 두 프로토콜은 함께 써줘야 한다!

class AddViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @IBOutlet weak var itemImg: UIImageView!
    let imgPickerController = UIImagePickerController()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        imgPickerController.delegate = self
    }
 }

 

2. 앨범 접근 액션 수행

버튼 클릭 시 앨범이 수행되도록 imagePickerController의 sourceType을 photoLibrary로 설정

imagePickerController는 UIViewController를 상속받는 컨트롤러이기 때문에,

present 메서드를 이용해서 컨트롤러 뷰를 띄워준다!

@IBAction func addImgAction(_ sender: Any) {
	// 이미지 소스로 사진 라이브러리 선택
	imgPickerController.sourceType = .photoLibrary
    // 이미지 피커 컨트롤러 실행
	self.present(imgPickerController, animated: true, completion: nil)
}

 

1-1. 선택한 이미지를 imageView로 보여준다.

UIImageView 객체의 아울렛 변수에 선택한 이미지를 넣어주는 방법! 위 방법으로 앨범을 수행했으면, 앨범 내에 사용할 사진을 선택할 것이다. 먼저, 이 선택을 감지하는 메소드와 선택을 취소했을 때 수행하는 아래 두 메소드가 있다.

• imagePickerController(_: didFinishPickingMediaWithInfo:) : 이미지 피커 컨트롤러에서 이미지를 선택하거나 카메라 촬영을 완료했을 때 호출되는 메소드
• imagePickerControllerDidCancel : 이미지 피커 컨트롤러가 실행된 후 이미지 선택 없이 그냥 취소했을 때 호출되는 메소드

나는 포토 라이브러리(갤러리)에서 이미지 선택 후 수행되는  didFinishPickingMediaWithInfo 메소드에서 가지고 온 이미지를 UIImage로 변환 후 photoImageView의 이미지로 넣어주었다.

이때, infoKey 설정에 따라 원하는 값을 통해 이미지를 넣어줄 수 있다.

• UIImagePickerController.infoKey.mediaType : 전달받은 미디어 타입에 대한 정보
• UIImagePickerController.infoKey.originalImage : 선택한 이미지에 대한 원본 데이터
• UIImagePickerController.infoKey.editedImage : 수정된 이미지를 전달
• UIImagePickerController.infoKey.cropRect : 크롭 한 이미지일 경우, 크롭 된 이미지를 전달

UIImageView 변수에 이미지를 넣어주었고, UI 처리라 GCD 적용해 주었다.

이후, dismiss를 통해 picker를 닫고 이전 화면으로 돌아간다.

이미지 선택과 동시에 didFinishPickingMediaWithInfo 메소드가 수행되는 것과 선택한 이미지가 잘 출력되었다.

이렇게 선택한 이미지를 그대로 출력하는 것은 매우 쉽다! 이제 이 이미지를 서버에 올려보자.

---

1-2. 선택한 이미지 혹은 카메라로 찍은 이미지를 서버에 업로드한다.(with. alamofire)

asset에 저장된 이미지 또는 위의 방법으로 올린 이미지를 서버에 업로드해 보자.

⭐️ Alamofire-upload 사용하여 선택한 사진을 서버에 업로드하기

이미지를 data로 전환해서 멀티파트로 전송하는 방법으로

Content-Type 이 multipart/form-data인 타입의 통신으로 데이터를 심어서 post를 날리는 거라 생각하면 된다!

 

1. URL, Request Header 작성하기

HTTP message body에 들어가는 데이터 타입을 HTTP 헤더에 명시해 준다.

이때, 사용하는 필드가 Content-Type이고 multipart 타입으로 값으로 헤더에 추가해준다.

*MultiPart 이미지를 data로 전환해서 전송하는 방식

// 서버 url
let url: String = "~~~"
        
let header: HTTPHeaders = [
	"Content-Type" : "multipart/form-data"
]

 

2. requester body 구성하기

서버 API에 맞게 맞는 body로 구성해준다. 없으면 안 넣어줘도 됨.

let parameters: [String : Any] = [:]

*파일 업로드 할 때, HTTP 규약을 보면,

파일 업로드 API

boundary의 문자열 중 마지막 **------WebKitFormBoundaryQGvWeNAiOE4g2VM5--** 값은 다른 값과 다르게 --가 마지막에 붙었는데, -- 는 body의 끝을 알리는 의미를 가진다.

URLSession으로 파일업로드를 구현하면 아래 예시처럼 직접 구현해주어야 한다.

let boundary = "Boundary-\(UUID().uuidString)"

하지만, alamofire을 사용하면, 아래와 같이 alamofire의 MultipartFormData 구현해주고 있어 구현할 필요가 없다.

alamofire의 MultipartFormData 내부 코드

 

3. multipartformdata에 추가할 데이터 처리

body 값과 업로드할 이미지를 multipartformdata에 추가 준다.

body에 넣어줘야 하는 데이터들의 타입은 Data 타입이어야 한다. 따라서 데이터가 String, int, double 등의 타입이면 모두 Data 형식으로 바꿔서 보내야 한다.

 

• 기본 타입의 데이터 처리
  • String: utf8로 먼저 인코딩 후 Data()로 변환 ex) Data(stringdata.utf8)

let content = "내용"

multipartFormData.append(Data(content.utf8 ?? "".utf8), withName: "content")

• 이미지 데이터 처리
  
  • withName - key값
  • fileName - 서버에 업로드할 파일 이름
  • mimeType - 파일 형식
  • 주의* fileName에 jpeg 또는 png 확장자를 꼭 붙여줘야 한다. 
    • ex) fileName: image.jpeg , memeType: image/jpeg

AF.upload(multipartFormData: { MultipartFormData in
	// body 추가
	for (key, value) in parameters {
		MultipartFormData.append("\(value)".data(using: .utf8)!, withName: key)
	}
	// UIImage 처리
        // img 추가 data로 타입 변경 필요!
	if let image = imageData?.pngData() {
		MultipartFormData.append(image, withName: "file", fileName: "test.png", mimeType: "image/png")
	}
    ...

*주의*

그런데, 앨범에서 혹은 촬영한 이미지 데이터가 용량이 너무 커서 업로드가 되지 않았다.

중간에 이미지 용량을 줄이는 코드를 추가해 주니 성공!

기존 갤러리에서 보낸 원본 이미지 사이즈는 가로세로 3000px 내외로 jpeg compression을 1로 하면 6MB 정도, 0.5로 하면 3MB 정도 되었다. compression을 더 줄이자니 화질이 안 좋아지고 사용할 사진 크기가 작아서, resize로 용량을 줄였다.

 

[리사이즈 코드]

let resizedImage = resizeImage(image: image, newWidth: 300)

extension UIImage{
    func resizeImage(image: UIImage, newWidth: CGFloat) -> UIImage {
        let scale = newWidth / image.size.width // 새 이미지 확대/축소 비율
        let newHeight = image.size.height * scale
        UIGraphicsBeginImageContext(CGSizeMake(newWidth, newHeight))
        image.draw(in: CGRectMake(0, 0, newWidth, newHeight))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }
}

 

[원본사진 용량]

imageData Foundation.Data? 9604841 bytes some

[리사이즈 후 용량]

imageData Foundation.Data? 102521 bytes some

 

4. response 처리

정상적으로 업로드되어 response 값을 받았고, json 디코딩 처리 해주었다.

 

---

🩶 Step 2. 서버 통신 후 response url로 imageView에 보여준다.

통신에 성공하여 받은 remote url로 이미지를 보여주자~

방법은 크게 Data(contentsOf: )를 사용하는 방법과 URLSession을 사용하는 방법 2가지 있는데, 아주 간단하다.(KingFisher에도 지원!)

 

*테스트할 수 있는 이미지가 있는 remote url

: https://fastly.picsum.photos/id/8/5000/3333.jpg?hmac=OeG5ufhPYQBd6Rx1TAldAuF92lhCzAhKQKttGfawWuA

 

Sol 1. Data(contentsOf: ) 사용하기

아래 코드와 같이 매우 간단하다. 

    let url = URL(string: "https://cdn.cocoacasts.com/cc00ceb0c6bff0d536f25454d50223875d5c79f1/above-the-clouds.jpg")!

    if let data = try? Data(contentsOf: url) {
        imageView.image = UIImage(data: data)
    }

하지만 이 방법은 실행은 되지만 Synchronous URL loading 스레드 에러가 발생한다.

메인 스레드에서 동기 url 로딩하면 UI 응답이 없을 수도 있다고 한다! 

그럼 비동기로 바꿔주자!

어떻게? 위 메시지에서 알려주는 것처럼 비동기 네트워크 API인 URLSession 사용하거나

혹은 아래와 같이 GCD를 사용하여 백그라운드 스레드에서 작업하자!

    let url = URL(string: "https://cdn.cocoacasts.com/cc00ceb0c6bff0d536f25454d50223875d5c79f1/above-the-clouds.jpg")!
	// 비동기 적용 
    DispatchQueue.global().async {
        if let data = try? Data(contentsOf: url) {
        	// UI 작업은 main 에서!
            DispatchQueue.main.async {
                self.imageView.image = UIImage(data: data)
            }
        }
    }

Sol 2. URLSession.shared.dataTask(with: url) 사용하기

URLSession.shared.dataTask()은 백그라운드 스레드에서 동작하기 때문에 내부 UI 관련 처리는 메인스레드로 전환해 주어야 한다.

        if let url = URL(string: https://cdn.cocoacasts.com/cc00ceb0c6bff0d536f25454d50223875d5c79f1/above-the-clouds.jpg")! {
            let task = URLSession.shared.dataTask(with: url) { data, response, error in
                guard let data = data, error == nil else { return }
				// UI는 메인 스레드에서 처리
                DispatchQueue.main.async { 
                    self.imgView.image = UIImage(data: data)
                }
            }
            task.resume()
        }

+ UIImageView에서 자주 부르면, extension으로 만들어줘서 호출하는 부분 깔끔하게 refac 해주기!

self.myPageImg.loadwithURLSession(url: URL(string:thumbnail)!)

extension UIImageView {
    func loadwithURLSession(url: URL) {
        let task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data, error == nil else { return }
            DispatchQueue.main.async { 
                self.image = UIImage(data: data)
            }
        }
        task.resume()
    }
}

---

[전체 코드]

앨범에서 사진 선택!

    public func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
            
            let ala = AlamofireManager()
            let resizedImage = resizeImage(image: image, newWidth: 300)

            ala.fileUpload(img: resizedImage, completion: { res in
                let url = URL(string: res)
                self.imgView.loadwithURLSession(url: url!)
            })
            self.dismiss(animated: true, completion: nil)
        }
    }

파일 업로드 후 response url 값 loadwithURLSession로 넘겨주면서 이미지 출력!

    func fileUpload(img: UIImage, completion: @escaping (String)->Void) {
        // 서버 url
        let url: String = "http://3.39.17.117:80/archive-files"
       
        // 헤더 구성 : Content-Type 필드에 multipart 타입추가
        let header: HTTPHeaders = [
            "Accept" : "application/json, application/javascript, text/javascript, text/json",
            "Content-Type" : "multipart/form-data"
        ]
        
        let parameters: [String : Any] = [:]
        let imageData = img.jpegData(compressionQuality: 1)
             
        AF.upload(multipartFormData: { MultipartFormData in
            // body 추가
            for (key, value) in parameters {
                MultipartFormData.append("\(value)".data(using: .utf8)!, withName: key)
            }
            // img 추가 data로 타입 변경 필요!
            if let image = imageData {
                MultipartFormData.append(image, withName: "file", fileName: "test.jpeg", mimeType: "image/jpeg")
            }
        }, to: url, method: .post, headers: header)
        .validate()
        .responseDecodable(of: GetUrl.self, completionHandler:  { response in
            switch response.result{
            case .success(let data):
                print("url : \(data.url)")
                completion(data.url)
            case .failure(let error):
              print(error)
            }
        })
    }