使用 App Inventor 將圖片上傳至 Cloudinary
App Inventor,  免費資源分享

使用 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 名稱,複製到記事本。




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

程序上傳圖片、視頻和其他檔|雲 (cloudinary.com)

需要帶入的參數如下:


因為要使用底下,未經授權的方式,所以剛剛才要在 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 帳號註冊

發表迴響