2019年2月13日

利用 Github API 上傳檔案﹍操作範例心得整理

利用 Github API 上傳檔案﹍操作範例心得整理

Wayne Fu 0 A+
github-api-upload-file.jpg-利用 Github API 上傳檔案﹍操作範例心得整理Github」是免費架設靜態網頁的好選擇,同時也提供了完善的 API,不必手動操作,用程式就能更新網頁,也能管理 Github 上的所有檔案。

本篇整理如何利用 Github API 上傳檔案的流程,並提供前端操作的範例程式碼。

(圖片出處: flickr.com)


一、準備動作


1. API 文件說明

官方說明文件都是英文,直接啃可能會消化不良,可先參考這篇整理:


大概熟悉 API 可做哪些事情之後,可再對照官方原文教程。


2. 取得 Token

「上傳檔案」這個動作需要安全性,因此呼叫 API 得先取得金鑰(Access Token),操作流程可參考官網說明:



這個頁面有圖文說明應該不難懂,摘要中文重點:

  • 先確認 Github 帳號已進行 Email 驗證
  • 登入 Github 網頁後,點擊右上角帳號圖示 → Settings
  • 點擊左側選單 Developer settings
  • 點擊左側選單 Personal access tokens
  • 點擊按鈕 Generate new token
  • Token descript 隨意填入描述文字
  • 下面借用官網的圖,勾選 repo 所有選項即可,其他不用勾選
  • 點擊按鈕 Generate token
  • 複製產生的 token 字串
  • 請好好保存,token 字串只會出現一次,以後不會再出現
  • 如 token 遺失,可重新產生 token 即可

github-api-upload-file-1.gif-利用 Github API 上傳檔案﹍操作範例心得整理



二、上傳檔案 API


操作上傳檔案的 API 官網文件在此:


上傳檔案的部分是「Create a file」,操作的語法如下:

PUT /repos/擁有者帳號/目錄/contents/檔案路徑

其他重點可參考文件,但我必須說,文件內容非常不完整,除非已經有開發工程師的底子,否則光靠文件根本無法成功操作 API。除了參考其他教學文章,自己也亂試一通才找出成功上傳的方法,因此不如直接看範例程式碼比較快。



三、上傳檔案範例程式碼


製作上傳檔案的按鈕,可參考這篇「自訂 Input File 檔案上傳按鈕 CSS 最佳解法」,取得檔案內容後,接者用 jQuery Ajax 來呼叫 Github API 上傳檔案:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>
var url = "https://api.github.com/repos/wfublog/test/contents/abc.txt?access_token=xxxxxxxxxxxxxxxxxxxxxxx",
data = {
"message": "test", // 檔案的備註資訊
"content": "bXkgbmV3IGZpbGUgY29udGVudHM=" // base64 編碼
};

$.ajax({
type: "put",
url: url,
headers: {
"Content-Type": "application/json" // 指定送出資料為 json 格式
},
data: JSON.stringify(data), // 一定要將物件轉成字串才會被接受
success: function ()json {
console.log("good! " + JSON.stringify(json));
},
error: function ()json {
console.log("error! " + JSON.stringify(json));
}
});
</script>

以下一一詳細說明:
  • 呼叫 api 的 url 紅色字串:
    • "wfublog" 字串換成你的 owner 名稱
    • "test" 字串換成你要上傳的目錄
    • "abc.txt" 換成你的檔案名稱,也可加上子目錄的路徑,例如 "sub/abc.txt";如果子目錄不存在,系統會自動建立子目錄
    • "xxxxx...." 換成你的 token 金鑰
  • 送出的 data 內容:
    • message 參數可隨意填入自己的檔案描述文字
    • content 參數即為上傳的檔案內容,必須是 base64 編碼
  • 用 jQuery 的 Ajax 呼叫 API 時,要加入 headers 指定送出資料為 json 格式
  • 不能直接送出 data 物件,Github API 只能吃字串格式,所以要用 JSON.stringify 把 data 轉成字串

成功送出後,可在 Chrome 開發人員工具看到 console 訊息如下:

github-api-upload-file-2.jpg-利用 Github API 上傳檔案﹍操作範例心得整理

返回的物件有各種上傳檔案的相關路徑、其他資訊,可做進一步的後續處理。



四、補充說明


本篇提供的程式碼,僅供學習理解、前端測試之用,千萬不能直接在公開網頁上使用,因為 token 大喇喇被別人看到,你的 Github 權限大開,網頁、檔案所有資料都將不保

瞭解概念後,請將範例程式碼改為後端執行,不讓 token 曝光才能安心上傳檔案。


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

沒有留言:

張貼留言注意事項:

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

TOP