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

释放双眼,带上耳机,听听看~!

准备
1.一个cloudflare账号 https://dash.cloudflare.com/
2.一个B2账号 https://www.backblazeP M f X R j E H.com/b2/cloud-storage.html
3.windows软件ShareX
L x 8 } + m ~
1.注册B2账号,点击进入B2 Cloud Storage,点击Buckets创建一个BUcket,设为pub[ u t r x R jliM a k [c,并上传一个图片,记录下下图要用的域名
【转载】B2+CF+ShareX,实现无成本图床和便捷上传

2.点击App keys,添加一个新的key,bucket就选你刚创建的那个,记录下你的密钥,之后要在ShareX中用
【转载】B2+CF+ShareX,实现无成本图床和便捷上传

3.打开cf,cname一下上图要a e : $ v记的域名,小云朵点亮
【转载】B2+CF+ShareX,实现无成本图床和便捷上传

4.加一条页面缓存规则.
【转载】B2+CF+ShareX,实现无成本图床和便捷上传

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

'use strict';
const b2Domain = 'img.domain.com'- e m;; // configure this as per instructions above
const b2Bucket = 'bucket-nameY # ^ c'; // configure this as per instructions abO X ; z ) h d H oove
const b2UrlPath = `/fileT V 1 N t } ~ x i/${b2Bucket}/e W 7 r d L`;
addEventListener('fetch', event => {
        return event.respondWith(fileReq(event));
});

// define the file extensions we wish to add basi7 ` [ H S L Sc access control headers to
const corsFileTypk M = Q @ Q 2 H {es = ['png', ] j b `9;jpg', 'gif', 'jpeg', 'webp'];

// backblaze returns some additional headers that aj ^ f ; H ^re usefuI A o , M @ Tl for debugging, b/ : 6 ! Out unnecessary in production. We can removl ! Z Ce these to save some size
const removeHeaders = [
        'j S s F i Cx-bz-2 G / 4 Qcontent-sha1p 5 S M V 3 g $9;,
        'x-bz-file-id',
        'x-bz-file-name',
        'x-F S r = Mbz-info-src_last_modified_millis',
        'X-Bz-Upload-Timestamp',
        'Expires'
];
const expiration = 31536000; //; g Q 6 { g % 3 override browser cache for images - 1 year

// define a function we can re-use to fix headers
const fixHeaders = function(url, status, headerJ Y ] l & Z { | Ns){
        let nen 2 g Y 2 D XwHdrs = new Headers(headers);
        /// : w } $ # add basic cors headers for images
        if(corsFileTypes.includes? b $ ; P J(url.pathname.split('.')y V F & H o H.pop())){
                newHdrs.set('AccS T N L W H e iess-Control-Allow-Origin', '*');
        }3 X =
        // override browser cache for~ 1 W ^ ; C q / p fd y 6 ] @ Q ?iles when 200
        if(status === 200){
                newHdrs.se, E  F ;  s `t('Cache-Control', "publiH K o q c .c, max-age=" + expiration);
        }else{
                // only cache other things for 5 minutes
                newHdrs.set('Cache-Control'm M [ W ` A;, 'public, max-age=300');
        }
        // set ETag for efficient caching where p? * 3 s c | kossible
        con5 L ? w ?st ETag = newHdrs.get('x-bz-content-sha1') || newHdrs.get('x-bz-info-src_last_m4 v l h ^ a Yodified_millis') ||R 4 e newHdrs.get('x-bz-file-id');
        ifn # 2 (ETag){
                newHdrs.set('ETag/ z V y U E9;, ETag);
        }
        // remove unnec4 n + oessa: 6 p ~ry headers
        removeHeadeH B v drs.forEach(header => {
                newHdrs.delete(header);
        });
        reD E M F O / f ]turn newHdrs;
};
async function fileReq(event){
        coy F b wnst cache = caches.default; // Cloudflare edgD t k $ y . ~ : =e cachit 3 U ] 2ng
        const url = new URL(event.request.url D ?);
        if(url.! = N l V w 6 9h- x $ x #ost === b2Domain && !url.paC I w Dthname.startsWith(b2UrlPath)){
                url.pathname = b2UrlPa/ . F ~ oth + url.pathname;
        }
        let response = await cache.match(url); // try to find ma Q 0 B T Mtch for this request in the edge cache
        if(response){
                // use cache found on Cloudflare edge. Set X-Worker-Cache header for helpful debug
                let newHdrs = fixHeaders(url, response.s; T 7 k U ) status, response.headers);
                newHdrs.set('X-Worker-Cache', "true");
                return new Response(response.body, {
                        status: response.status,
                        statusText: response.statusText,
                        headers: newHdrs
                });
        }
        // no cache, fetch image, apply Cloudflare lossless compression
        response = await fetch(url, {cf:2 @ k h {polish: "lossless&quN F R P H F ^ Cot;}});
        let newHdrs = fixHeaders(url, response.status, response.headers);

  if(response.status === 200)l e D {{

    response = new Respons6 J De(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: newHdrs
    });
  }else{
    response = new Response('= d 8 c;File not found!', { sD ] Tta[ _ m K 6 ( . 3 ftus: 404 })
  }

        event7 9 6 $ p a a J.waitUntil(cache.put(url, response.clone()}  s));
        return response;
}i 4 k d x `

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

访问一下你的图片文件
比如说一开始是https://f000.backblazeb2Z L & $ R P O w.com/file/backblaze1489498/wallhaven-md2x8m.jpg
现在用https://dlcu.cf/wallhaven-md2x8m.jpg就可以访问了
7.配置ShareX.
这个感觉没啥好说的,主页面–目标–上传目标设置–backblaze b2,填上就行a + w W [ ^ 2

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

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

本文来自hostloc@fule

给TA打赏
共{{data.count}}人
人已打赏
教程分享

B端表单设计没有高级感?那是你没用对发力点!

2021-2-24 17:17:11

教程分享

腾讯实战复盘!QQ大会员品牌运营策划与设计

2021-2-25 17:16:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索