什么？图床又挂了！试试我造的这款免费，稳固，完全自主可控的开源图床吧 ...

大家好，我是来自苏州的祥子，一个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 上传代码，仅供参考，上传参数大家可以微调。

1. // 我的 bucket 叫 oosnail, 位于 杭州区
2. upUrl = 'https://oosnail.oss-cn-hangzhou.aliyuncs.com/';
3. // ak,sk 你懂的，鉴权用的
4. var accessKey = 'ak';
5. var secretKey = 'sk';
6. // 构建可以访问的地址
7. function parseRet(text, formData) {
8.     return upUrl + formData.get('key');
9. }
10. // 构建上传表单
11. function buildForm(file) {
12.     var policyText = {
13.         "expiration": new Date((Date.now() + 300000)).toISOString(),
14.         "conditions": [
15.             ["content-length-range", 0, 104857600]
16.         ]
17.     };
18.     var policyBase64 = Base64.encode(JSON.stringify(policyText));
19.     var signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(policyBase64, secretKey));
20.     var data = new FormData();
21.     var key = new Date().format('yyyy/MM/dd/h/') + random_string(6) + get_suffix(file.name);
22.     // 文件路径，我设置的类似 2025/05/21/sdfesd.png 这样的
23.     data.append('key', key);
24.     // 签名相关的，可以参照官方文档
25.     data.append('policy', policyBase64);
26.     data.append('OSSAccessKeyId', accessKey);
27.     data.append('success_action_status', '200');
28.     data.append('signature', signature);
29.     // 待上传的文件
30.     data.append('file', file);
31.     return data;
32. }

复制代码

自界说扩展

有肯定开辟本领的可以根据其他存储进行扩展，提供如下资料：

• upUrl: 请提供您个人服务端上传接口完全路径，POST 表单上传
  
• buildForm(file): 构建表单参数方法，您可以填写个人自界说字段至form表单中
  
• parseRet(text, formData): 剖析ajax响应内容，返回图片的完全访问路径用于快速复制及汗青记录
  

1. // 上传接口
2. upUrl = 'https://yoururl';
3. // 构建form表单数据，file表示待上传的文件
4. function buildForm(file) {
5.     var data = new FormData();
6.     data.append('file', file);
7.     return data;
8. }
9. // 返回服务端响应的图片访问链接
10. function parseRet(text, formData) {
11.     var res = JSON.parse(text);
12.     var image_url = res.data;
13.     return image_url;
14. }

复制代码

比方我个人还有一个 七牛云存储 的配置示比方下（七牛云现在没有免费域名绑定了，必要填写自己备案的域名才行）：

1. upUrl = 'https://upload.qiniup.com/';
2. var accessKey = 'ak';
3. var secretKey = 'sk';
4. var bucketHost = 'http://laijuba.qiniudn.com/';
5. function parseRet(text, formData) {
6.     var res = JSON.parse(text);
7.     var image_url = bucketHost + res.key;
8.     return image_url;
9. }
10. function buildForm(file) {
11.     var fileName = file.name;
12.     var flags = {
13.         deadline: Math.floor(Date.now() / 1000) + 300,
14.         scope: "laijuba",
15.         saveKey: "${year}/${mon}/${day}/$(etag)" + get_suffix(fileName)
16.     };
17.     var encodedFlags = urlsafeBase64Encode(JSON.stringify(flags));
18.     var encoded = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(encodedFlags, secretKey));
19.     var encodedSign = base64ToUrlSafe(encoded);
20.     var uploadToken = accessKey + ':' + encodedSign + ':' + encodedFlags;
21.     var data = new FormData();
22.     data.append('token', uploadToken);
23.     data.append('file', file);
24.     return data;
25. }

复制代码

问题反馈

可以直接留+言，看到会及时回复的，也可以提 issue （推荐）。加挚友备注：图床

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。