2019年3月20日

前端操作 Apps Script 上傳檔案到 Google Drive 並取得連結﹍實作範例

前端操作 Apps Script 上傳檔案到 Google Drive 並取得連結﹍實作範例

Wayne Fu 0 A+
先前示範過「操作 Github API 上傳檔案」的作法,這次介紹如何操作 API 上傳檔案到 Google Drive。

實際上,如果真的使用 Google Drive API 來上傳檔案有些麻煩,因為需要走 oAuth2 驗證權限、每次都需取得 Access Token 金鑰,整個流程的步驟太多,說明起來複雜。

本篇找到的流程相對比較簡易,不需處理 oAuth2、Access Token,直接寫 Apps Script 就能從前端上傳檔案到 Google Drive,並取得檔案連結,以下來看如何進行。



一、準備動作


1. 指定 Google Drive 上傳資料夾

首先選定一個 Google Drive 存放檔案的路徑,進入該目錄之後,網址格式大致是這樣子:

https://drive.google.com/drive/folders/目錄 ID
請記下自己的紅字「目錄 ID」字串,之後會用到。


2. 處理 Drive API 授權

在 Google Apps Script 指令碼的頁面,從選單的「資源」→「進階 Google 服務」→ 往下捲到 Drive API,啟用這個 API。

之後就可直接在 GAS 直接呼叫 Drive API,不必處理身份驗證。



二、操作 Apps Script 指令碼


1. 撰寫 Apps Script 指令碼

進入「Google Drive」→ 按左上角「新增」→ 更多 → Google Apps Script

指令碼內容如下:

var folderId = "目錄 ID 字串",
folder = DriveApp.getFolderById(folderId);

function doGet(e) {
var para = e.parameter,
fileName = para.fileName,
fileType = para.fileType,
base64Data = para.base64Data;

return getFileUrl(fileName, fileType, base64Data);
}

function getFileUrl(fileName, fileType, base64Data) {
var data = Utilities.base64Decode(base64Data),
blob = Utilities.newBlob(data, fileType, fileName),
file = folder.createFile(blob),
fileUrl = file.getUrl();

return ContentService.createTextOutput(fileUrl);
}

  • 紅字請替換為自己 Google Drive 存放檔案資料夾的「目錄 ID」字串
  • 上傳到 Google Drive 的檔案需先將 base64 編碼格式的內容作處理,轉換為 blob 格式
  • 接著使用官方提供的 DriveApp 就能非常簡單的操作上傳檔案,存放到指定路徑


2. 取得授權

儲存之後,或是第一次執行之前,系統會彈出要求授權的視窗,這個流程有好幾個步驟,詳細的圖文說明可參考「Google 試算表製作可執行 Apps Script 指令碼的按鈕」→「三、撰寫 Apps Script 指令碼」這裡的授權流程。


3. 發佈指令碼

最後要將指令碼發佈到網路上成為應用程式,供前端呼叫,操作流程如下:

  • 檔案 → 管理版本
  • 輸入描述內容 → 按「儲存新版本」 → 確定
  • 發佈 → 部署為網路應用程式 → 選擇版本
  • 將應用程式執行為:「我」
  • 具有應用程式存取權的使用者:「任何人,甚至是匿名使用者」
  • 按「部署」

接著視窗上會顯示「目前的網路應用程式網址」,網址格式如下:

https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxx/exec
請記下自己的「網路應用程式網址」,之後會用到。



三、前端 HTML / JS 範例


接著前端使用以下範例程式碼,即可上傳檔案到 Google Drive,並立即取得檔案連結:


  • 紅字請替換為自己的「網路應用程式網址」
  • 操作 input 取得檔案內容的原理,可參考「HTML5 File API 讀取檔案內容
  • 重要的是利用 File API,分別取出檔案名、檔案格式、base64 格式編碼內容
  • 上傳成功後,會在 #fileUrl 這個地方顯示 Google Drive 檔案路徑


更多 Google Apps Script 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 1.圖片無法上傳。
    2.ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js載入速度慢,建議換版本。

    回覆刪除
    回覆
    1. 1. 剛測試留言圖片上傳,沒有任何問題,可再試試看
      2. 載入速度取決於 CDN 伺服器的狀況,如覺得速度慢請自行替換為喜歡的 CDN 連結

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP