大家好，我是來自蘇州的祥子，一個90後程序猿，為了實現算命先生的預言——30歲之後財運亨通，雖然我選擇了亨通開發的房產（亨通，本土500強公司），擁有亨通物業的服務，可還缺財運，所以重新撿起技術實現自我救贖。
本文主要介紹我自己造的圖牀輪子，起名叫：喔喔圖牀，之所以重新造輪子，是因為作為一名IT民工，平時喜歡寫一些文檔，博客，並且比較喜歡 Markdown 語法，但一直以來比較困擾的一個問題就是插入圖片麻煩，因為文檔可能會放置到各個網站中，如何保證圖片能夠正常顯示（跨域請求）是一件頭痛的事情。
用過一些免費的圖牀，比如：圖殼，sm.ms, 貼圖庫等等，用着用着要麼開始收費了，要麼被監管約談了，要麼入不敷出倒閉了，總之都不靠譜，作為倔強的小強，索性自己搞一個算了。
喔喔圖牀，是一個基於 Chrome 內核瀏覽器的插件，可以安裝在主流的現代瀏覽器上，開箱即用，綠色無公害。
LOGO圖標如下：
特點
- 支持點選/拖拽/本地粘貼3種方式上傳圖片至圖牀
- 支持右鍵上傳網頁圖片
- 支持批量上傳
- 可生成圖片鏈接,HTML,UBB和Markdown四種格式
- 歷史瀏覽（僅限瀏覽器本地緩存，清緩存將會失效）
- 支持配置多種存儲後端（默認阿里雲）
- 離線插件安裝，免翻牆
地址：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 （推薦）。加好友備註：圖牀
