使用 App Inventor 將圖片上傳至 Cloudinary

前幾天在 App Inventor 的社團，看到有人分享，從 Thunkable 上傳圖片到 Cloudinary 的教學，感覺蠻有趣的！所以也想試著用 App Inventor，看能不能把圖片也傳上去！？最後發現它有提供 API 可以上傳，但是要透過 App Inventor 上傳的檔案，只能透過雲端連結(例如：把圖片放在 Imgur，再複製圖片的位置。)，如果要將手機的圖片直接上傳，得另外用別人寫好的套件。

所以今天單純介紹，如何使用 App Inventor，將放在 Imgur 平台的圖片，直接上傳到 Cloudinary。

至於 Cloudinary 平台，網路上已有很多介紹，這裡就不再多敘述了！

---

1. 首先，進到 Cloudinary 官網，點擊右上角紅色「SIGN UP FOR FREE」按鈕，申請一個帳號。

點我進入

申請好帳號後，登入進去。

點擊左上方的「Dashboard」按鈕，並將顯示出來的「Cloud name」，先存到記事本。(底下的 Key 不用)

---

Cloud name 可以到設定裡面修改，點右上角的齒輪鈕，在 Account 底下，有個 Cloudinary cloud name 可以修改，改完後再按 Save 儲存。

---

點右上角的齒輪鈕進到設定，選擇「Upload」，往下滑到「Upload presets」的地方，右邊有個「Enabled Unsigned upload……」的紅字 (因為我點過了！所以現在看不到)，點完後把下方 Mode 為「Unsigned」的 Name 名稱，複製到記事本。

---

資料上傳用的網址格式如下：

需要帶入的參數如下：

因為要使用底下，未經授權的方式，所以剛剛才要在 upload preset 那裡，設定啟用未簽名上傳。

2. 開啟 App Inventor，並新增一個專案。

所需元件如下：

切換至程式設計

先建立以下變數：

---

變數 cloud_name 存放 Cloud name………

變數 resource_type 存放要上傳的文件類型。(這四種在剛剛網址格式的圖片都有寫，但這次只有要傳圖片，所以直接設定成 image 也行。)

變數 URL 存放網址的前半段

變數 upload_preset 存放剛剛設定完的 Unsigned 的 Name

變數 image_URL 存放要上傳的圖片位置

---

再繼續拖拉以下方塊：

---

網址格式為：

https://api.cloudinary.com/v1_1/cloud_name/image/upload

呼叫網路元件執行 POST 文字請求

要帶入的參數為 file 和 upload_preset

兩個參數之間要用 & 符號隔開

---

最後，當網路元件取得文字後，再查看回應內容。

App 至此撰寫完畢！趕緊用模擬器測試看看吧

---

App 完整程式拼圖

---

專案 aia 檔案下載

---

App 專案執行範例

---

如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊