Upload Image từ UIImagePickerController sử dụng Alamofire

Chủ Nhật, 11/10/2020

Tram Ho

Đầu tiên.

Upload từ UIImagePickerController bạn sẽ cần một file data từ Image Picker.

Đầu tiên bạn sẽ cần UIImagePickerControllerDelegate , UINavigationControllerDelegate và thêm Privacy-Photo Library Usage Description trong file info.plist.

Trước khi gọi function imagePickerController, bạn cần thêm delegate UIImagePickerController bên trong function của bạn. Ví dụ mình có một function handleProfilePicker

<span class="token keyword">func</span> <span class="token function">handleProfilePicker</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> picker <span class="token operator">=</span> <span class="token function">UIImagePickerController</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    picker<span class="token punctuation">.</span>delegate <span class="token operator">=</span> <span class="token keyword">self</span>
    picker<span class="token punctuation">.</span>allowsEditing <span class="token operator">=</span> <span class="token boolean">true</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">(</span>your custom code <span class="token keyword">for</span> navigationBar <span class="token keyword">in</span> <span class="token builtin">Picker</span> color<span class="token punctuation">)</span>
    <span class="token keyword">self</span><span class="token punctuation">.</span><span class="token function">present</span><span class="token punctuation">(</span>picker<span class="token punctuation">,</span>animated<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>completion<span class="token punctuation">:</span> <span class="token constant">nil</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

func handleProfilePicker() {

let picker = UIImagePickerController()

picker.delegate = self

picker.allowsEditing = true

....(your custom code for navigationBar in Picker color)

self.present(picker,animated: true,completion: nil)

}

Sau khi thêm delegate bạn có thể gọi function imagePickerController didFinishPickingMediaWithInfo . Function này để giữ file image từ thư viện photo của bạn

<span class="token keyword">func</span> <span class="token function">imagePickerController</span><span class="token punctuation">(</span><span class="token number">_</span> picker<span class="token punctuation">:</span> <span class="token builtin">UIImagePickerController</span><span class="token punctuation">,</span> didFinishPickingMediaWithInfo info<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token builtin">String</span> <span class="token punctuation">:</span> <span class="token builtin">Any</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {

}

Mình có một đoạn code mẫu khi hoàn thành việc chọn ảnh từ picker để xử lý giá trị Image được edit và chưa edit:

<span class="token keyword">func</span> <span class="token function">imagePickerController</span><span class="token punctuation">(</span><span class="token number">_</span> picker<span class="token punctuation">:</span> <span class="token builtin">UIImagePickerController</span><span class="token punctuation">,</span> didFinishPickingMediaWithInfo info<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token builtin">String</span> <span class="token punctuation">:</span> <span class="token builtin">Any</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> selectedImage<span class="token punctuation">:</span> <span class="token builtin">UIImage</span><span class="token operator">?</span>
  <span class="token keyword">if</span> <span class="token keyword">let</span> editedImage <span class="token operator">=</span> info<span class="token punctuation">[</span><span class="token string">"UIImagePickerControllerEditedImage"</span><span class="token punctuation">]</span>   <span class="token keyword">as</span><span class="token operator">?</span> <span class="token builtin">UIImage</span> <span class="token punctuation">{</span>
      selectedImage <span class="token operator">=</span> editedImage
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token keyword">let</span> originalImage <span class="token operator">=</span> info<span class="token punctuation">[</span><span class="token string">"UIImagePickerControllerOriginalImage"</span><span class="token punctuation">]</span> <span class="token keyword">as</span><span class="token operator">?</span> <span class="token builtin">UIImage</span> <span class="token punctuation">{</span>
      selectedImage <span class="token operator">=</span> originalImage
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token keyword">let</span> selectedImages <span class="token operator">=</span> selectedImage <span class="token punctuation">{</span>
  <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

var selectedImage: UIImage?

if let editedImage = info["UIImagePickerControllerEditedImage"] as? UIImage {

selectedImage = editedImage

} else if let originalImage = info["UIImagePickerControllerOriginalImage"] as? UIImage {

selectedImage = originalImage

}

if let selectedImages = selectedImage {

....

}

Sau khi thành công chọn ảnh từ picker, việc thứ hai là biết data images. UIImageJPEGRepresentation sẽ return image được chọn từ picker thành JPEG image và nén nó lại

<span class="token keyword">if</span> <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token function">UIImageJPEGRepresentation</span><span class="token punctuation">(</span>selectedImages<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>

if let data = UIImageJPEGRepresentation(selectedImages,1) {

}

Parameters

Chúng ta sẽ upload image từ picker khi yêu cần cần có asscess token

<span class="token keyword">if</span> <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token function">UIImageJPEGRepresentation</span><span class="token punctuation">(</span>selectedImages<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">let</span> parameters<span class="token punctuation">:</span> <span class="token builtin">Parameters</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
   <span class="token string">"access_token"</span> <span class="token punctuation">:</span> <span class="token string">"YourToken"</span>
   <span class="token punctuation">]</span>
   <span class="token comment">// You can change your image name here, i use NSURL image and convert into string</span>
   <span class="token keyword">let</span> imageURL <span class="token operator">=</span> info<span class="token punctuation">[</span><span class="token builtin">UIImagePickerControllerReferenceURL</span><span class="token punctuation">]</span> <span class="token keyword">as</span><span class="token operator">!</span> <span class="token constant">NSURL</span>
   <span class="token keyword">let</span> fileName <span class="token operator">=</span> imageURL<span class="token punctuation">.</span>absouluteString
   <span class="token comment">// Start Alamofire</span>
   <span class="token builtin">Alamofire</span><span class="token punctuation">.</span><span class="token function">upload</span><span class="token punctuation">(</span>multipartFormData<span class="token punctuation">:</span> <span class="token punctuation">{</span> multipartFormData <span class="token keyword">in</span> 
   <span class="token keyword">for</span> <span class="token punctuation">(</span>key<span class="token punctuation">,</span>value<span class="token punctuation">)</span> <span class="token keyword">in</span> parameters <span class="token punctuation">{</span>
        multipartFormData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token punctuation">(</span>value <span class="token keyword">as</span><span class="token operator">!</span> <span class="token builtin">String</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span>using<span class="token punctuation">:</span> <span class="token punctuation">.</span>utf8<span class="token punctuation">)</span><span class="token operator">!</span><span class="token punctuation">,</span> withName<span class="token punctuation">:</span> key<span class="token punctuation">)</span>
   <span class="token punctuation">}</span>
   multipartFormData<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> withName<span class="token punctuation">:</span> <span class="token string">"avatar"</span><span class="token punctuation">,</span> fileName<span class="token punctuation">:</span> fileName<span class="token operator">!</span><span class="token punctuation">,</span>mimeType<span class="token punctuation">:</span> <span class="token string">"image/jpeg"</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  usingTreshold<span class="token punctuation">:</span> <span class="token builtin">UInt64</span><span class="token punctuation">.</span><span class="token keyword">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  to<span class="token punctuation">:</span> <span class="token string">"YourURL"</span><span class="token punctuation">,</span>
  method<span class="token punctuation">:</span> <span class="token punctuation">.</span>put<span class="token punctuation">,</span>
  encodingCompletion<span class="token punctuation">:</span> <span class="token punctuation">{</span> encodingResult <span class="token keyword">in</span> 
  <span class="token keyword">switch</span> encodingResult <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token keyword">let</span> upload<span class="token punctuation">,</span> <span class="token number">_</span><span class="token punctuation">,</span> <span class="token number">_</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
          upload<span class="token punctuation">.</span>responJSON <span class="token punctuation">{</span> response <span class="token keyword">in</span>
          <span class="token function">debugPrint</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
    <span class="token keyword">case</span> <span class="token punctuation">.</span><span class="token function">failure</span><span class="token punctuation">(</span><span class="token keyword">let</span> encodingError<span class="token punctuation">)</span><span class="token punctuation">:</span>
         <span class="token function">print</span><span class="token punctuation">(</span>encodingError<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
 <span class="token punctuation">}</span>

let parameters: Parameters = [

"access_token" : "YourToken"

]

// You can change your image name here, i use NSURL image and convert into string

let imageURL = info[UIImagePickerControllerReferenceURL] as! NSURL

let fileName = imageURL.absouluteString

// Start Alamofire

Alamofire.upload(multipartFormData: { multipartFormData in

for (key,value) in parameters {

multipartFormData.append((value as! String).data(using: .utf8)!, withName: key)

}

multipartFormData.append(data, withName: "avatar", fileName: fileName!,mimeType: "image/jpeg")

},

usingTreshold: UInt64.init(),

to: "YourURL",

method: .put,

encodingCompletion: { encodingResult in

switch encodingResult {

case .success(let upload, _, _):

upload.responJSON { response in

debugPrint(response)

}

case .failure(let encodingError):

print(encodingError)

}

})

}

Đảm bảm key của bạn trong tham số cùng với sever và tất nhiên tham số withName trong multipartFormData là giống nhau.
Mình hi vọng bạn sẽ thành công upload ảnh từ picker với Alamofire

Source: https://medium.com/@hanifsgy/alamofire-multipart-with-parameters-upload-image-from-uiimagepickercontroller-swift-a4abada24ae

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Upload Image từ UIImagePickerController sử dụng Alamofire

Đầu tiên.

Parameters

In App Purchase trong Android (Phần 1)

Tìm hiểu Angular, tạo project sample Angular

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu