![使用 App Inventor 將圖片上傳至 Cloudinary 使用 App Inventor 將圖片上傳至 Cloudinary](https://i0.wp.com/i.imgur.com/FFnT3Mi.png?resize=1024%2C538&ssl=1)
使用 App Inventor 將圖片上傳至 Cloudinary
前幾天在 App Inventor 的社團,看到有人分享,從 Thunkable 上傳圖片到 Cloudinary 的教學,感覺蠻有趣的!所以也想試著用 App Inventor,看能不能把圖片也傳上去!?最後發現它有提供 API 可以上傳,但是要透過 App Inventor 上傳的檔案,只能透過雲端連結(例如:把圖片放在 Imgur,再複製圖片的位置。),如果要將手機的圖片直接上傳,得另外用別人寫好的套件。
所以今天單純介紹,如何使用 App Inventor,將放在 Imgur 平台的圖片,直接上傳到 Cloudinary。
至於 Cloudinary 平台,網路上已有很多介紹,這裡就不再多敘述了!
1. 首先,進到 Cloudinary 官網,點擊右上角紅色「SIGN UP FOR FREE」按鈕,申請一個帳號。
![](https://i0.wp.com/i.imgur.com/4xvKtIh.png?w=960&ssl=1)
申請好帳號後,登入進去。
點擊左上方的「Dashboard」按鈕,並將顯示出來的「Cloud name」,先存到記事本。(底下的 Key 不用)
![](https://i0.wp.com/i.imgur.com/Kh64Rcr.png?w=960&ssl=1)
Cloud name 可以到設定裡面修改,點右上角的齒輪鈕,在 Account 底下,有個 Cloudinary cloud name 可以修改,改完後再按 Save 儲存。
![](https://i0.wp.com/i.imgur.com/oxo1BlQ.png?w=960&ssl=1)
點右上角的齒輪鈕進到設定,選擇「Upload」,往下滑到「Upload presets」的地方,右邊有個「Enabled Unsigned upload……」的紅字 (因為我點過了!所以現在看不到),點完後把下方 Mode 為「Unsigned」的 Name 名稱,複製到記事本。
![](https://i0.wp.com/i.imgur.com/eAXfuk2.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/0u1I0tK.png?w=960&ssl=1)
資料上傳用的網址格式如下:
![](https://i0.wp.com/i.imgur.com/0oHANLd.png?w=960&ssl=1)
需要帶入的參數如下:
![](https://i0.wp.com/i.imgur.com/c0WbqQU.png?w=960&ssl=1)
因為要使用底下,未經授權的方式,所以剛剛才要在 upload preset 那裡,設定啟用未簽名上傳。
2. 開啟 App Inventor,並新增一個專案。
所需元件如下:
![](https://i0.wp.com/i.imgur.com/Xn8q044.png?w=960&ssl=1)
切換至程式設計
先建立以下變數:
![](https://i0.wp.com/i.imgur.com/S1rbAAf.png?w=960&ssl=1)
變數 cloud_name 存放 Cloud name………
變數 resource_type 存放要上傳的文件類型。(這四種在剛剛網址格式的圖片都有寫,但這次只有要傳圖片,所以直接設定成 image 也行。)
變數 URL 存放網址的前半段
變數 upload_preset 存放剛剛設定完的 Unsigned 的 Name
變數 image_URL 存放要上傳的圖片位置
再繼續拖拉以下方塊:
![](https://i0.wp.com/i.imgur.com/HhDah9E.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/BguOZwl.png?w=960&ssl=1)
網址格式為:
https://api.cloudinary.com/v1_1/cloud_name/image/upload
呼叫網路元件執行 POST 文字請求
要帶入的參數為 file 和 upload_preset
兩個參數之間要用 & 符號隔開
最後,當網路元件取得文字後,再查看回應內容。
![](https://i0.wp.com/i.imgur.com/ByhiqAa.png?w=960&ssl=1)
App 至此撰寫完畢!趕緊用模擬器測試看看吧
App 完整程式拼圖
![](https://i0.wp.com/i.imgur.com/pDJMxIm.png?w=960&ssl=1)
專案 aia 檔案下載
App 專案執行範例
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![使用 App Inventor 讀取 Google 試算表 (多分頁篇) 使用 App Inventor 讀取 Google 試算表 (多分頁篇)](https://i0.wp.com/i.imgur.com/hBSzCOD.png?resize=75%2C75&ssl=1)
![App Inventor 角色左右移動教學 App Inventor 角色左右移動教學](https://i0.wp.com/i.imgur.com/TWGRhGe.png?resize=75%2C75&ssl=1)