LogoSEOHub.Tools
Blog Post Image

Obsidian, Typora 图床自动上传 By Cloudflare R2 + Picgo【转载】

Obsidian 和 Typora 的图片自动上传至 Cloudflare R2 图床,非常丝滑,过程也很简单! 1、开启 Cloudflare R2 ,进行配置;2、下载 PicGo,将 R2 的配置填进去;3、Obsidian 下载插件直接支持;4、Typora 原生支持 PicGo。

写博客或网站文章以及内容同步到其他平台时,非常推荐markdown编辑器,在引用图片时无需迁移图片资源,而且能分担服务器带宽压力,图片直接通过 Picgo 上传到 Cloudflare R2,然后在 Obsidian 或者 Typora 写完文章,复制 Markdown 文本到我的博客直接发布即可。

Cloudflare R2

Cloudflare 一直被称为赛博活佛,R2 10G 的 Storage,用不完,根本用不完,而且不用搞备案验证(你们知道我在说什么)

CleanShot 2025-02-23 at 10.39.56@2x.png

创建 API Token

R2 是 Cloudflare 的对象存储服务,首先需要注册 Cloudflare,注意开通 R2 需要绑定信用卡,不用担心,并不是绑定就扣费。
首先进入 R2,配置一个 API token,如图:

16ef235a12ae12064dd9d889b992777b 2.png

点击 Manage API tokens,进入之后,点击 Create API token

b1d490782afa91f7526f48b8c867277c 4.png

选择 Object Read & Write ,给到普通的读写权限即可。

b1391b64e7bea7c8083e528a09673486.png

此时会创建 Token value, Access Key ID, Secret Access Key,一定要将这些内容保存到本地,不要遗失,因为后期无法找回,只能重置或者删除。也不要泄露,泄露会有风险,我图中的示例随后会删除。

f1233ac8cf15f231b71e9df7a18d1907.png

创建 Bucket

回到 R2 首页,创建一个 Bucket

CleanShot 2025-02-23 at 08.52.17@2x.png

填写 Bucket 名称之后,点击创建即可,这里 R2 会根据你的网络位置,自动选择一个离你较近的节点,当然你也可以指定节点存放位置。

CleanShot 2025-02-23 at 08.54.16@2x.png

创建完 Bucket 之后,可以看到你创建的 Bucket 列表,点击目标 Bucket 进入详情页。
这里的 S3 API 地址需要记录下来,一会配置 Picgo 的自定义节点时,需要用到。

CleanShot 2025-02-23 at 09.11.43@2x.png

另外由于我的图片都是放到公网可访问的,所以需要打开这个详情页 Public access 下面的 R2.dev subdomain, 同样记录下来这个地址。

CleanShot 2025-02-23 at 09.13.41@2x.png

【可选】如果你需要自定义自己的域名,同样在这个页面也可以进行配置,有个自定义域名选项

CleanShot 2025-02-23 at 09.15.48@2x.png

这样就配置完毕了

Picgo 配置

Picgo 支持多种图床的开源服务,是当前使用最广泛的图床工具,提供客户端下载Picgo 下载网站地址
S3图床配置下载
Picgo 需要下载 S3 插件才能支持 Cloudflare 的图床下载,在插件设置页面搜索 S3 即可找到,点击安装

CleanShot 2025-02-23 at 09.02.19@2x.png

之后在图床设置,将前面 Cloudflare 中创建的应用密钥和节点等相关信息粘贴进去

CleanShot 2025-02-23 at 09.05.49@2x.png

  • 图床配置名: 只是个别名,用于在 Picgo 里面做区分,随意填写一个即可
  • 应用密钥 ID: 上述创建 API Token 时产生的 Access Key ID
  • 应用密钥: 上述创建 API Token 时产生的 Secret Access Key
  • 桶名: 填写刚才创建的 Bucket 名称,是英文。
  • 自定义节点: 创建 Bucket 时生成的 S3 API endpoints

自定义输出 URL 模板也要填写,由于 S3 插件版本更新,移除了自定义域名的配置项,使用自定义输出 URL 模板,我这里配置的是上面的 Cloudflare R2 的 R2.dev Bucket URL 再结合 pathname 变量 https://pub-d3ecf764a1b9400f903cfefb2142e96f.r2.dev/{path} 如图

CleanShot 2025-02-23 at 09.32.14@2x.png

至此,Picgo 配置完毕,可以在上传区进行文件的上传了。上传支持文件上传,URL及剪切板直接上传,体验还是非常丝滑的。

CleanShot 2025-02-23 at 09.37.17@2x.png

上传完之后,可以在相册里面看到刚才上传的结果,点击可以直接复制链接。

CleanShot 2025-02-23 at 09.39.13@2x.png

这里推荐打开 PicGo 设置里面的上传后自动复制 URL 到剪切板选项,这样图片上传完之后,直接 Ctrl + V 就能获取到 URL 了,无需手动复制。

CleanShot 2025-02-23 at 09.41.07@2x.png

Obsidian 配置自动上传

Obsidian 通过第三方插件可以实现图片文件插入时自动上传到 Cloudflare R2,进入 Obsidian 设置页面,打开第三方插件

CleanShot 2025-02-23 at 10.47.45@2x.png

搜索 Image auto upload 插件,点击安装

CleanShot 2025-02-23 at 10.49.07@2x.png

点击选项进行配置

CleanShot 2025-02-23 at 10.50.18@2x.png

建议配置项如下:
1、打开剪切板自动上传,这样粘贴进来的图片,可以直接通过刚才的 Picgo 的配置,将图片上传到 Cloudflare R2,并且替换成 R2 图片的线上可访问地址。
2、建议打开上传文件后移除在 Obsidian 附件文件夹源文件的开关,不然会同时将图片内容在本地存放一份,不然图片都会展示到列表里面,非常难看。

CleanShot 2025-02-22 at 23.34.35@2x.png

可以实现在 Obsidian 粘贴图片时,自动上传 Cloudflare R2 并且替换 Image URL 的 Markdown 图像插入语法,非常丝滑。

CleanShot 2025-02-23 at 10.21.43@2x.png

Typora 配置自动上传

Typora 官方可以直接接入,如 iPic,uPic,Picsee,Picgo 等图床工具,在上述 Picgo 配置完成之后,直接在这里选择 PicGo.app 即可实现配置。

CleanShot 2025-02-23 at 10.17.40@2x.png

同样可以设置,在 Typora 插入图片时,的不同行为选项。这里选择上传图片,就可以实现在 Typora 粘贴图片时,自动上传 Cloudflare R2 并且替换 Image URL 的 Markdown 图像插入语法

CleanShot 2025-02-23 at 10.20.03@2x.png

其他

说下为什么没有选择七牛云,其实七牛云有文件夹的空间管理,比较方便管理资源文件,但是七牛云都需要对域名进行备案(我可烦死这些了),我的域名当前是在 Cloudflare 托管的,所以就更适合使用 Cloudflare R2 来作为图床。

自定义域名

我的域名是 meepo.me,因为我的这个域名是托管在 Cloudflare 上面的,我在这个配置了一个 r2.meepo.me 作为自定义域名,直接 Continue 即可。点击 Connect domain,会自动创建成功。

CleanShot 2025-02-23 at 22.49.18@2x.png

这样我的地址就更改为了 https://r2.meepo.me/meepo/2025/02/7d852979d830bd6c640ccbb7e63e0f52.png 这种方式,更加的清晰。
如果做了自定义域名,那么在 PicGo 里面把自定义输出 URL 模板改为自定义域名的 path

CleanShot 2025-02-23 at 22.52.15@2x.png

Bingo! 搞定

文章转载自:https://meepo.me/obsidian-typora-image-cloudflare-r2-management/

发布者

iBigQiang

2025/02/24

文章分类

订阅通讯

加入我们的资讯列表

订阅我们的通讯,获取最新资讯和更新通知。