Ep5_How to Upload Images to Firebase Storage

1. 建立 ImageView的Action

2. 使用 Extension

3. 開啟 ImagePickerController

4. 使用 ImagePickerController.delgate

5. 上傳圖片至 Firebase的Storage

6. 上傳圖片至 Firebase的Database

---

建立 ImageView的Action

LoginViewController.swift

此時點圖片，DebugArea會印出123

---

使用 Extension 將  handleSlectProfileImageView() 獨立出來

1. 建立 LoginController+handles.swift

2. 將 LoginController.swift的handleSelectProfileImageView() 剪下貼 LoginController+handles.swift

一樣可以印123

---

開啟 ImagePickerController

1. 在 Info.plist 加入 Privacy - Photo Library Usage Description

2. 開始 ImagePickerController

3. 執行

 

---

建立 Cancel按鈕的Action

當按下Cancel，印出canceled picker

---

建立 點擊圖片的Action

點擊圖片後，印出圖片訊息

查看 Info 內容
執行畫面點擊圖片時，會停在中斷點


Info 有3筆資料
第3筆資料名稱為UIImagePickerControllerOriginalImage，
存放著原始圖片的大小

現在來取得圖片的大小，並印出來

執行

開啟圖片編輯模式

執行


接下來我們再來查看 Info 內容
多了一筆UIImagePickerControllerEditImage，內容為編輯後的圖片大小


接下來，我們來取得編輯後的圖片大小


進入編輯模式，按下Cancel，並印出編輯後的大小



取得編輯後的圖片


編輯模式，按下Cancel後，跳至登入畫面

---

將 LoginController的handleRegister() 剪下貼至 LoginController+handles

將圖片上傳至 Firebase的Storage

LoginController+handles.swift
import Firebase
handleRegister()


let storageRef = FIRStorage.storage().reference().child("myImage.png")
建立 storage變數，用來上傳圖片至 storage 用的變數
UIImagePNGRepresentation(self.profileImageView.image!)
將圖片壓縮為png，用來上傳至 storage 用的參數
storageRef.put
上傳圖片至stroage
metadata
上傳圖片，storageRef.put回傳的資訊

上傳成功
右下角可以取得上傳圖片的網址

查看matadata內容


取得上傳圖片的網址
輸入 po metadata?.downloadURL()

---

上傳圖片至Database

★ profileImageUrl = metadata?.downloadURL()?.absoluteString
取得上傳圖片的網址
★ let values = ["name":name , "email":email , "profileImageUrl":profileIIamgeUrl]
新增圖片的網址至Database
★ self.registerUserInfoDataWithUID(uid,values)
呼叫 上傳Database的方法

將Database獨立出來


查看values內容


Database


在這之前，我們上傳至Storage的圖片都是同一個
接下來我們要每次上傳圖片，都建立一個新的檔案

現在每次建立一筆新的帳號，就會建一筆新的圖片


為上傳的圖片建立資料夾