什么？图床又挂了！试试我造的这款免费，稳固，完全自主可控的开源图床吧
大家好，我是来自苏州的祥子，一个90后步调猿，为了实现算命先生的预言——30岁之后财运亨通，固然我选择了亨通开辟的房产（亨通，本土500强公司），拥有亨通物业的服务，可还缺财运，以是重新捡起技能实现自我救赎。本文主要先容我自己造的图床轮子，起名叫：喔喔图床，之以是重新造轮子，是因为作为一名IT民工，平时喜欢写一些文档，博客，并且比力喜欢 Markdown 语法，但不停以来比力困扰的一个问题就是插入图片麻烦，因为文档可能会放置到各个网站中，怎样保证图片可以或许正常表现（跨域请求）是一件头痛的事情。
用过一些免费的图床，好比：图壳，sm.ms, 贴图库等等，用着用着要么开始收费了，要么被羁系约谈了，要么入不敷出倒闭了，总之都不靠谱，作为倔强的小强，索性自己搞一个算了。
喔喔图床，是一个基于 Chrome 内核浏览器的插件，可以安装在主流的现代浏览器上，开箱即用，绿色无公害。
LOGO图标如下：
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163255583-1678296609.png
特点
[*]支持点选/拖拽/当地粘贴3种方式上传图片至图床
[*]支持右键上传网页图片
[*]支持批量上传
[*]可天生图片链接,HTML,UBB和Markdown四种格式
[*]汗青浏览（仅限浏览器当地缓存，清缓存将会失效）
[*]支持配置多种存储后端（默认阿里云）
[*]离线插件安装，免FQ
地址：https://github.com/bytesops/oopic
好用记得给点 好评 + star 哟。阅读原文可以快速访问。
单张上传
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163326856-449837031.png
批量上传
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163335205-253263711.png
上传汗青记录
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163347185-1365303898.png
使用指南
使用图床分 3 步：
[*]拥有 chrome 内核的现代浏览器（这个不多说了）
[*]开通阿里云OSS 存储并获取 AK,SK（免费的哟，可以充值10块钱意思一下）
[*]安装此插件并完成配置（配置域名，AK,SK）
开通阿里云OSS
推荐接纳 阿里云OSS 用于存储图片（个人可以注册阿里云账号，开通OSS，有免费额度，根本够用）
登录进入到控制台，搜索 对象存储。
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722058-1094275105.png
Bucket 列表，创建 Bucket
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722278-2099481256.png
填写必要的信息，选择开放公共读（重点）
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722070-639222158.png
进入到 Bucket 点击概览，可以看到外网访问点
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722250-1648338931.png
这个访问点就是下面示例中提到的 upUrl 的一部分。
另外，还必要创建你的 AK, SK， 点头像 - AccessKey 管理，创建 AccessKey 并保存下来。
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722065-1580535457.png
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722066-809618867.png
安装插件并配置
下载最新完备代码并解压到磁盘某一位置（任何位置都可以）。
https://github.com/bytesops/oopic/archive/refs/heads/master.zip
如：E:\data\oopic-master
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722295-925787932.png
在浏览器地址栏中输入：chrome://extensions/
然后点击 加载已解压的扩展步调，选择 oopic-master 目录。
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722317-885482107.png
为了方便使用，可以将其固定至浏览器地址栏右侧。
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722330-121631192.png
然后单击图标，在弹出的上传页中，点击 设置/汗青 进行插件配置。
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722381-1512890893.png
配置上一节中获取的 阿里云OSS 接入点及你的 AK, SK
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163722542-600697090.png
阿里云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 （推荐）。加挚友备注：图床
https://img2024.cnblogs.com/blog/2573330/202405/2573330-20240523163520536-118689487.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]