七牛云是國(guó)內(nèi)一家領(lǐng)先的云存儲(chǔ)公司，可以利用七牛云存儲(chǔ)對(duì)象存儲(chǔ)圖片。雖然現(xiàn)在各種圖床，但還是希望能夠搭建一個(gè)私有的圖床。所以一直有希望使用七牛云搭建圖床的想法，之前一直沒(méi)有好好地看懂七牛云的 SDK，后來(lái)在仔細(xì)地看了一遍之后，終于知道如何利用官方的 SDK 來(lái)實(shí)現(xiàn)圖片上傳。過(guò)年在家花了一點(diǎn)時(shí)間，后來(lái)陸續(xù)也寫了一點(diǎn)，完成了這個(gè)七牛云圖床 chrome 拓展。

注冊(cè)賬戶

首先你可以通過(guò)這個(gè)鏈接注冊(cè)你的七牛云賬戶。在成功注冊(cè)賬戶之后，可能還需要綁定手機(jī)號(hào)，你就可以創(chuàng)建存儲(chǔ)空間，可以理解成為文件存儲(chǔ)的文件夾。

創(chuàng)建好存儲(chǔ)空間（bucket）就已經(jīng)完成了私有圖庫(kù)的第一步。

開發(fā)

在這也會(huì)對(duì)所有代碼一一解釋，主要是講解一下在開發(fā)中遇到的一些問(wèn)題。首先基于七牛云存儲(chǔ)開發(fā)，有必要學(xué)會(huì)七牛云存儲(chǔ) API 的使用。可以在官方 SDK 文檔獲取所有文檔。本拓展的開發(fā)主要是基于 js 來(lái)進(jìn)行開發(fā)，因此我們只需要了解 js SDK 文檔。

文檔中提到了一點(diǎn)：JS-SDK 依賴服務(wù)端頒發(fā) token，可以通過(guò)以下二種方式實(shí)現(xiàn)：

• 利用七牛服務(wù)端 SDK 構(gòu)建后端服務(wù)
• 利用七牛底層 API 構(gòu)建服務(wù)，詳見(jiàn)七牛上傳策略和上傳憑證(https://developer.qiniu.com/k...

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

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

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

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

完成本地 token 的，我的開發(fā)就完成了一大步。這個(gè)拓展需要兩個(gè)界面的設(shè)置，就是包括圖片上傳頁(yè)面以及七牛云存儲(chǔ)配置頁(yè)面。關(guān)于這兩個(gè)頁(yè)面的設(shè)計(jì)，我也就不一一贅述，主要講幾點(diǎn)：

七牛云信息存儲(chǔ)

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

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'});}

另外一個(gè)問(wèn)題是如果配置頁(yè)打開時(shí)，無(wú)法在拓展程序彈出頁(yè)面添加圖片，暫時(shí)不知道是什么原因?qū)е碌摹＝鉀Q辦法是在保存配置之后，設(shè)置延時(shí)關(guān)閉當(dāng)前 tab。

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

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

另外值得一提的是利用 css 的 :hover 的屬性來(lái)實(shí)現(xiàn)鏈接格式 button 的出現(xiàn)，只需要點(diǎn)擊 button 就可以將鏈接復(fù)制到剪切板。

?

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;}

拓展安裝

這個(gè)拓展最終也在 chrome 商店上架了。拓展的安裝方式有兩種，第一種就是去chrome 商店去安裝，這種方式是推薦的，不過(guò)需要科學(xué)上網(wǎng)。另外一種就是去項(xiàng)目倉(cāng)庫(kù)下載項(xiàng)目文件，然后在 chrome://extensions 選擇以開發(fā)者模式加載已解壓的拓展程序。

結(jié)語(yǔ)

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

以上

歡迎搜索微信號(hào) mad_coder 或者掃描二維碼關(guān)注公眾號(hào)：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。