七牛云是國內一家領先的云存儲公司，可以利用七牛云存儲對象存儲圖片。雖然現在各種圖床，但還是希望能夠搭建一個私有的圖床。所以一直有希望使用七牛云搭建圖床的想法，之前一直沒有好好地看懂七牛云的 SDK，后來在仔細地看了一遍之后，終于知道如何利用官方的 SDK 來實現圖片上傳。過年在家花了一點時間，后來陸續也寫了一點，完成了這個七牛云圖床 chrome 拓展。

注冊賬戶

首先你可以通過這個鏈接注冊你的七牛云賬戶。在成功注冊賬戶之后，可能還需要綁定手機號，你就可以創建存儲空間，可以理解成為文件存儲的文件夾。

創建好存儲空間（bucket）就已經完成了私有圖庫的第一步。

開發

在這也會對所有代碼一一解釋，主要是講解一下在開發中遇到的一些問題。首先基于七牛云存儲開發，有必要學會七牛云存儲 API 的使用。可以在官方 SDK 文檔獲取所有文檔。本拓展的開發主要是基于 js 來進行開發，因此我們只需要了解 js SDK 文檔。

文檔中提到了一點：JS-SDK 依賴服務端頒發 token，可以通過以下二種方式實現：

• 利用七牛服務端 SDK 構建后端服務
• 利用七牛底層 API 構建服務，詳見七牛上傳策略和上傳憑證(https://developer.qiniu.com/k...

第一個方法還需要搭建服務器來頒發 token，顯然這種方法不太經濟，如果僅僅是為了這個圖床搭建一個后端服務，就不太劃算了。因此，我選擇第二種，在客戶端來生成 token。這種方法就需要你了解上傳策略以及上傳憑證。

上傳策略是資源上傳時附帶的一組配置設定。通過這組配置信息，七牛云存儲可以了解用戶上傳的需求：它將上傳什么資源，上傳到哪個空間，上傳結果是回調通知還是使用重定向跳轉，是否需要設置反饋信息的內容，以及授權上傳的截止時間等等。上傳策略主要是 scope 和 dealine 這兩個字段是必須要的。scope 是指定上傳的目標資源空間 Bucket 和資源鍵 Key，這里我們只需要設置 bucket。deadline 是上傳憑證有效截止時間。Unix時間戳，單位為秒。該截止時間為上傳完成后，在七牛空間生成文件的校驗時間，而非上傳的開始時間，官方建議建議設置為上傳開始時間 + 3600s。

function genPolicy(scope) {let policy = {scope: scope,deadline: (new Date()).getTime() + 3600}return policy; }

按照上述算法流程構建客戶端的上傳 token，官方有提供上傳憑證的在線示例，通過整理形成了自己的 token.js。

完成本地 token 的，我的開發就完成了一大步。這個拓展需要兩個界面的設置，就是包括圖片上傳頁面以及七牛云存儲配置頁面。關于這兩個頁面的設計，我也就不一一贅述，主要講幾點：

七牛云信息存儲

為了上傳圖片，我們需要配置 AK，SK，bucket 以及 domain。這些都可以在七牛云的控制臺里面獲取，因此我們需要在首次打開拓展的時候檢查是否具有這些數據。至于這些配置信息保存在什么地方，一開始打算采取的是 chrome.storage 來進行存儲，這樣做的好處是可以利用賬號同步數據，但缺點是操作不方便，是異步的。后來還是決定使用 localStorage，一來使用起來非常方便，二是我們并不是特別需要賬號同步。因此，我們首先會檢查配置信息是否存儲在 localStorage，否則就打開配置頁：

const keys = ['ak', 'sk', 'bucket', 'domain'];let isConfig = true;keys.forEach(key => {if (!localStorage[key]) {isConfig = false;}})if (!isConfig) {chrome.tabs.create({url: 'options.html'});}

另外一個問題是如果配置頁打開時，無法在拓展程序彈出頁面添加圖片，暫時不知道是什么原因導致的。解決辦法是在保存配置之后，設置延時關閉當前 tab。

setTimeout(() => {chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {chrome.tabs.remove(tabs[0].id);})}, 1500)

目前圖片有有種上傳方式：即選擇文件上傳或者拖著拖放圖片上傳，這個主要是通過七牛云的官方 SDK 來實現。SDK 提供了多種事件綁定。另外值得注意的一點 ? ? ? 是 FileUploaded 事件返回的 info.res 是一個字符串，需要序列化成 json 格式來使用。

另外值得一提的是利用 css 的 :hover 的屬性來實現鏈接格式 button 的出現，只需要點擊 button 就可以將鏈接復制到剪切板。

?

function copyToClipboard(input) {const el = document.createElement('textarea');el.style.fontsize = '12pt'el.style.border = '0'el.style.padding = '0'el.style.margin = '0'el.style.position = 'absolute'el.style.left = '-9999px'el.setAttribute('readonly', '')el.value = inputdocument.body.appendChild(el)el.select()let success = false;try {success = document.execCommand('copy', true);} catch (err) { }document.body.removeChild(el);return success;}

拓展安裝

這個拓展最終也在 chrome 商店上架了。拓展的安裝方式有兩種，第一種就是去chrome 商店去安裝，這種方式是推薦的，不過需要科學上網。另外一種就是去項目倉庫下載項目文件，然后在 chrome://extensions 選擇以開發者模式加載已解壓的拓展程序。

結語

現在各種圖床層出不窮，我這也是重復造輪子。但是在理解 SDK 以及探索其使用，并且最終形成這個拓展程序的過程還是非常有意思的。陸陸續續花了一個多禮拜的時間完成這個拓展程序的開發，目前拓展程序仍然為 beta 版本，歡迎大家使用，有任何建議可以在 https://github.com/neal1991/i... 提 issue，歡迎 star 以及 pr。

以上

歡迎搜索微信號 mad_coder 或者掃描二維碼關注公眾號：

總結

以上是生活随笔為你收集整理的通过七牛云建立私有图床的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。