大家好，我是來自蘇州的祥子，一個90後程式猿，為了實現算命先生的預言——30歲之後財運亨通，雖然我選擇了亨通開發的房產（亨通，本土500強公司），擁有亨通物業的服務，可還缺財運，所以重新撿起技術實現自我救贖。
本文主要介紹我自己造的圖床輪子，起名叫：喔喔圖床，之所以重新造輪子，是因為作為一名IT民工，平時喜歡寫一些文件，部落格，並且比較喜歡 Markdown 語法，但一直以來比較困擾的一個問題就是插入圖片麻煩，因為文件可能會放置到各個網站中，如何保證圖片能夠正常顯示（跨域請求）是一件頭痛的事情。
用過一些免費的圖床，比如：圖殼，sm.ms, 貼相簿等等，用著用著要麼開始收費了，要麼被監管約談了，要麼入不敷出倒閉了，總之都不靠譜，作為倔強的小強，索性自己搞一個算了。
喔喔圖床，是一個基於 Chrome 核心瀏覽器的外掛，可以安裝在主流的現代瀏覽器上，開箱即用，綠色無公害。
LOGO圖示如下：
特點
- 支援點選/拖拽/本地貼上3種方式上傳圖片至圖床
- 支援右鍵上傳網頁圖片
- 支援批次上傳
- 可生成圖片連結,HTML,UBB和Markdown四種格式
- 歷史瀏覽（僅限瀏覽器本地快取，清快取將會失效）
- 支援配置多種儲存後端（預設阿里雲）
- 離線外掛安裝，免FQ
地址：https://github.com/bytesops/oopic
好用記得給點 好評 + star 喲。閱讀原文可以快速訪問。
單張上傳
批次上傳
上傳歷史記錄
使用指南
使用圖床分 3 步：
- 擁有 chrome 核心的現代瀏覽器（這個不多說了）
- 開通阿里雲OSS 儲存並獲取 AK,SK（免費的喲，可以充值10塊錢意思一下）
- 安裝此外掛並完成配置（配置域名，AK,SK）
開通阿里雲OSS
推薦採用 阿里雲OSS 用於儲存圖片（個人可以註冊阿里雲賬號，開通OSS，有免費額度，基本夠用）
登入進入到控制檯，搜尋 物件儲存。
Bucket 列表，建立 Bucket
填寫必要的資訊，選擇開放公共讀（重點）
進入到 Bucket 點選概覽，可以看到外網訪問點
這個訪問點就是下面示例中提到的 upUrl 的一部分。
另外，還需要建立你的 AK, SK， 點頭像 - AccessKey 管理，建立 AccessKey 並儲存下來。
安裝外掛並配置
下載最新完整程式碼並解壓到磁碟某一位置（任何位置都可以）。
https://github.com/bytesops/oopic/archive/refs/heads/master.zip
如：E:\data\oopic-master
在瀏覽器位址列中輸入：chrome://extensions/
然後點選 載入已解壓的擴充套件程式，選擇 oopic-master 目錄。
為了方便使用，可以將其固定至瀏覽器位址列右側。
然後單擊圖示，在彈出的上傳頁中，點選 設定/歷史 進行外掛配置。
配置上一節中獲取的 阿里雲OSS 接入點及你的 AK, SK
阿里雲OSS擴充套件
阿里雲OSS 上傳採用 PostObject 模式，大家可以閱讀具體的引數文件。
https://help.aliyun.com/document_detail/31988.htm
阿里雲OSS需要繫結自定義域名後才能瀏覽器直接預覽，否則會彈出下載，不過不影響作為圖床的使用（使用阿里雲自己的域名在網頁中也可以顯示，最下面的打賞連結就是用的aliyun的域名直接顯示的）。
下面是我使用畢生JS絕學所寫的 阿里雲OSS 上傳程式碼，僅供參考，上傳引數大家可以微調。
// 我的 bucket 叫 oosnail, 位於 杭州區
upUrl = 'https://oosnail.oss-cn-hangzhou.aliyuncs.com/';
// ak,sk 你懂的，鑑權用的
var accessKey = 'ak';
var secretKey = 'sk';
// 構建可以訪問的地址
function parseRet(text, formData) {
return upUrl + formData.get('key');
}
// 構建上傳表單
function buildForm(file) {
var policyText = {
"expiration": new Date((Date.now() + 300000)).toISOString(),
"conditions": [
["content-length-range", 0, 104857600]
]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText));
var signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(policyBase64, secretKey));
var data = new FormData();
var key = new Date().format('yyyy/MM/dd/h/') + random_string(6) + get_suffix(file.name);
// 檔案路徑，我設定的類似 2025/05/21/sdfesd.png 這樣的
data.append('key', key);
// 簽名相關的，可以參照官方文件
data.append('policy', policyBase64);
data.append('OSSAccessKeyId', accessKey);
data.append('success_action_status', '200');
data.append('signature', signature);
// 待上傳的檔案
data.append('file', file);
return data;
}
自定義擴充套件
有一定開發能力的可以根據其他儲存進行擴充套件，提供如下資料：
- upUrl: 請提供您個人服務端上傳介面完全路徑，POST 表單上傳
- buildForm(file): 構建表單引數方法，您可以填寫個人自定義欄位至form表單中
- parseRet(text, formData): 解析ajax響應內容，返回圖片的完全訪問路徑用於快速複製及歷史記錄
// 上傳介面
upUrl = 'https://yoururl';
// 構建form表單資料，file表示待上傳的檔案
function buildForm(file) {
var data = new FormData();
data.append('file', file);
return data;
}
// 返回服務端響應的圖片訪問連結
function parseRet(text, formData) {
var res = JSON.parse(text);
var image_url = res.data;
return image_url;
}
例如我個人還有一個 七牛雲端儲存 的配置示例如下（七牛雲現在沒有免費域名繫結了，需要填寫自己備案的域名才行）：
upUrl = 'https://upload.qiniup.com/';
var accessKey = 'ak';
var secretKey = 'sk';
var bucketHost = 'http://laijuba.qiniudn.com/';
function parseRet(text, formData) {
var res = JSON.parse(text);
var image_url = bucketHost + res.key;
return image_url;
}
function buildForm(file) {
var fileName = file.name;
var flags = {
deadline: Math.floor(Date.now() / 1000) + 300,
scope: "laijuba",
saveKey: "${year}/${mon}/${day}/$(etag)" + get_suffix(fileName)
};
var encodedFlags = urlsafeBase64Encode(JSON.stringify(flags));
var encoded = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(encodedFlags, secretKey));
var encodedSign = base64ToUrlSafe(encoded);
var uploadToken = accessKey + ':' + encodedSign + ':' + encodedFlags;
var data = new FormData();
data.append('token', uploadToken);
data.append('file', file);
return data;
}
問題反饋
可以直接留+言，看到會及時回覆的，也可以提 issue （推薦）。加好友備註：圖床
