B2+CF+ShareX,实现无成本图床和便捷上传

fule

准备
1.一个cloudflare账号 https://dash.cloudflare.com/
2.一个B2账号 https://www.backblaze.com/b2/cloud-storage.html
3.windows软件ShareX
步骤
1.注册B2账号,点击进入B2 Cloud Storage,点击Buckets创建一个BUcket,设为public,并上传一个图片,记录下下图要用的域名

2.点击App keys,添加一个新的key,bucket就选你刚创建的那个,记录下你的密钥,之后要在ShareX中用

3.打开cf,cname一下上图要记的域名,小云朵点亮

4.加一条页面缓存规则.

5.创建一个workers,粘贴下列代码,记得b2domain和bucket的值改成自己的

1. 'use strict';
   
2. const b2Domain = 'img.domain.com'; // configure this as per instructions above
   
3. const b2Bucket = 'bucket-name'; // configure this as per instructions above
   
4. const b2UrlPath = `/file/${b2Bucket}/`;
   
5. addEventListener('fetch', event => {
   
6.         return event.respondWith(fileReq(event));
   
7. });
   
8. 
   
9. // define the file extensions we wish to add basic access control headers to
   
10. const corsFileTypes = ['png', 'jpg', 'gif', 'jpeg', 'webp'];
    
11. 
    
12. // backblaze returns some additional headers that are useful for debugging, but unnecessary in production. We can remove these to save some size
    
13. const removeHeaders = [
    
14.         'x-bz-content-sha1',
    
15.         'x-bz-file-id',
    
16.         'x-bz-file-name',
    
17.         'x-bz-info-src_last_modified_millis',
    
18.         'X-Bz-Upload-Timestamp',
    
19.         'Expires'
    
20. ];
    
21. const expiration = 31536000; // override browser cache for images - 1 year
    
22. 
    
23. // define a function we can re-use to fix headers
    
24. const fixHeaders = function(url, status, headers){
    
25.         let newHdrs = new Headers(headers);
    
26.         // add basic cors headers for images
    
27.         if(corsFileTypes.includes(url.pathname.split('.').pop())){
    
28.                 newHdrs.set('Access-Control-Allow-Origin', '*');
    
29.         }
    
30.         // override browser cache for files when 200
    
31.         if(status === 200){
    
32.                 newHdrs.set('Cache-Control', "public, max-age=" + expiration);
    
33.         }else{
    
34.                 // only cache other things for 5 minutes
    
35.                 newHdrs.set('Cache-Control', 'public, max-age=300');
    
36.         }
    
37.         // set ETag for efficient caching where possible
    
38.         const ETag = newHdrs.get('x-bz-content-sha1') || newHdrs.get('x-bz-info-src_last_modified_millis') || newHdrs.get('x-bz-file-id');
    
39.         if(ETag){
    
40.                 newHdrs.set('ETag', ETag);
    
41.         }
    
42.         // remove unnecessary headers
    
43.         removeHeaders.forEach(header => {
    
44.                 newHdrs.delete(header);
    
45.         });
    
46.         return newHdrs;
    
47. };
    
48. async function fileReq(event){
    
49.         const cache = caches.default; // Cloudflare edge caching
    
50.         const url = new URL(event.request.url);
    
51.         if(url.host === b2Domain && !url.pathname.startsWith(b2UrlPath)){
    
52.                 url.pathname = b2UrlPath + url.pathname;
    
53.         }
    
54.         let response = await cache.match(url); // try to find match for this request in the edge cache
    
55.         if(response){
    
56.                 // use cache found on Cloudflare edge. Set X-Worker-Cache header for helpful debug
    
57.                 let newHdrs = fixHeaders(url, response.status, response.headers);
    
58.                 newHdrs.set('X-Worker-Cache', "true");
    
59.                 return new Response(response.body, {
    
60.                         status: response.status,
    
61.                         statusText: response.statusText,
    
62.                         headers: newHdrs
    
63.                 });
    
64.         }
    
65.         // no cache, fetch image, apply Cloudflare lossless compression
    
66.         response = await fetch(url, {cf: {polish: "lossless"}});
    
67.         let newHdrs = fixHeaders(url, response.status, response.headers);
    
68. 
    
69.   if(response.status === 200){
    
70. 
    
71.     response = new Response(response.body, {
    
72.       status: response.status,
    
73.       statusText: response.statusText,
    
74.       headers: newHdrs
    
75.     });
    
76.   }else{
    
77.     response = new Response('File not found!', { status: 404 })
    
78.   }
    
79. 
    
80.         event.waitUntil(cache.put(url, response.clone()));
    
81.         return response;
    
82. }

复制代码

6.workers里添加路由,使访问你的域名时,先走workers

访问一下你的图片文件
比如说一开始是https://f000.backblazeb2.com/file/backblaze1489498/wallhaven-md2x8m.jpg
现在用https://dlcu.cf/wallhaven-md2x8m.jpg就可以访问了
7.配置ShareX.
这个感觉没啥好说的,主页面--目标--上传目标设置--backblaze b2,填上就行了


结束
这个的好处就是方便了上传,自己在电脑前,截一下图直接上传,或者复制一下直接上传
还有就是可以用自己的域名,再说的话就是数据自己也能找回.

演示
本文中的图片都是演示

大佬们给俺的博客ip+1可好，秋梨膏

Mr.

前段时间深度研究过 b2 + cf workers，因为我也准备搭建个自用的图床。

其实 cf workers 那段代码完全不需要写那么复杂… 这代码从英文网站到中文站 基本都是复制粘贴，最初写的人估计都没弄懂 cf workers fetch 的缓存策略。

鉴于我一直在 Mac 和 Windows 之间切换使用，这些搭配本地软件的方案我都不喜欢，准备写一个在线版的图床程序，然后在 b2 和 cloudinary 之间犹豫，b2 的上传接口太蛋疼，cloudinary 其实通过 cf workers 也能自定义域名。

最终一直没动工 是因为卡在了没找到喜欢的域名

✅ 支持任意文件上传
✅ 直接从剪切板粘贴上传（对于截图上传很爽）
✅ 无损压缩图片
✅ 密码访问
✅ 在线管理

这是根据自己的需求 计划的功能，各位 mjj 给点鼓励吧，老规矩写出来了开源

Mr.

LIHKG 发表于 2021-2-25 23:33
https://github.com/xiebruce/PicUploader
这个PHP项目支持cloudinary
不过万恶的本地移动劫持了cloudina ...

这个有意思，基本上我的想要的都有了

fule

zxxx 发表于 2021-2-25 14:40
谢谢分享，博客ip+1

谢谢大佬

zxxx

正头痛没法对接ShareX呢，大佬就发啦！！！！！！！

fule

zxxx 发表于 2021-2-25 14:36
正头痛没法对接ShareX呢，大佬就发啦！！！！！！！

哈哈哈这个用起来还蛮方便的

zxxx

谢谢分享，博客ip+1

imzhifu

已收藏

Ftsb

和jsDliver+github比优势大吗

流河旱树

不错不错 等会试试

hostloccom

谢谢大佬，晚上试试

fule

Ftsb 发表于 2021-2-25 14:48
和jsDliver+github比优势大吗

github用picgo的话也挺方便的，主要是GitHub不是专门拿来做存储的，这个是专门做存储的