Skip to content

Commit e9cebee

Browse files
longsizhuolongsizhuo
authored
Merge pull request #137 from LynPtl/patch-1
Create cloudflare-r2-sharex-free-image-hosting.mdx
2 parents 9a4ce25 + dfacf0b commit e9cebee

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed

‎app/docs/CommunityShare/Geek/cloudflare-r2-sharex-free-image-hosting.mdx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: '使用 Cloudflare R2 + ShareX 搭建个人/团队专属“永久”图床'
3+
description: ""
4+
date: "2025-09-27"
5+
tags:
6+
- tag-one
7+
---
8+
9+
# 使用 Cloudflare R2 + ShareX 搭建个人/团队专属“永久”图床
10+
11+
本指南旨在提供一个从零开始，利用 Cloudflare R2 的免费套餐和 ShareX 的强大功能，搭建一个高性能、高可靠性、几乎零成本且数据完全由自己掌控的图床的完整流程。
12+
13+
**最终效果**：通过一个快捷键截图，图片自动上传到你的专属存储空间，或手动上传自己的图片，自动将 Markdown 格式的链接复制到剪贴板，实现无缝写作。
14+
15+
---
16+
17+
## 目录
18+
1. [第一部分：配置 Cloudflare R2 (云端存储)](#第一部分配置-cloudflare-r2-云端存储)
19+
2. [第二部分：配置 ShareX (桌面客户端)](#第二部分配置-sharex-桌面客户端)
20+
3. [第三部分：优化 ShareX 工作流](#第三部分优化-sharex-工作流)
21+
4. [常见问题 (F.A.Q) 与排错](#常见问题-faq-与排错)
22+
23+
---
24+
25+
## 第一部分：配置 Cloudflare R2 (云端存储)
26+
27+
首先来到Cloudflare开通R2存储。
28+
![](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/%E5%9B%BE%E7%89%87_20250927143514.png)
29+
30+
### 1.1 创建 R2 存储桶 (Bucket)
31+
32+
存储桶是存放你所有图片的容器。
33+
34+
1. 登录 Cloudflare 控制台，在左侧菜单进入 **R2**。
35+
2. 点击 **Create bucket (创建存储桶)**。
36+
3. **Bucket name**: 输入一个全局唯一的存储桶名称 (例如 `your-org-images-2025`)。
37+
4. **Location**: 保持默认的 **Automatic**。
38+
5. 点击 **Create bucket**。
39+
40+
![](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/xrRAVMB2Sz.png)
41+
42+
### 1.2 开放存储桶的公开访问权限
43+
44+
为了让上传的图片能被外部访问，需要开启公共访问。
45+
46+
1. 进入你刚创建的存储桶，点击顶部的 **Settings (设置)** 选项卡。
47+
![1r0AU3aWkD.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/1r0AU3aWkD.png)
48+
2. 在 **下方Public Development URL** 部分，点击右侧的 **Enable**。
49+
3. 输入确认信息。
50+
![fgc4amk7S7.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/fgc4amk7S7.png)
51+
4. **记下**这里显示的 `https://pub-....r2.dev` 格式的 URL，这是你的公共访问域名。
52+
![RmQwxSxpLi.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/RmQwxSxpLi.png)
53+
54+
### 1.3 创建用于上传的 API Token
55+
56+
API Token 是让 ShareX 有权限上传文件到 R2 的“钥匙”。
57+
58+
1. 回到 R2 的主页（概览页面），点击右上角的 **Manage API Tokens (管理 R2 API 令牌)**。
59+
![CTzhiiSl04.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/CTzhiiSl04.png)
60+
1. 点击 **Create Account API token (创建 API 令牌)**。
61+
![FBEzXXohz7.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/FBEzXXohz7.png)
62+
2. **Permissions (权限)**: **务必选择 `Object Read & Write` (对象读和写)**。这是最关键的一步，只读权限会导致上传失败。
63+
![xB4pYQOeEI.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/xB4pYQOeEI.png)
64+
3. 点击 **Create API token**。
65+
4. **⚠️ 立即复制并保存！** 页面上会显示 `Access Key ID` 和 `Secret Access Key`。**这两个密钥只会出现这一次**，请立刻将它们复制并粘贴到一个安全的地方。最下方的Default endpoints链接也需要保存一下。
66+
![kg9E8tEozI.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/kg9E8tEozI.png)
67+
68+
---
69+
70+
## 第二部分：配置 ShareX (桌面客户端)
71+
72+
### 2.1 下载并安装 ShareX
73+
74+
从官网下载最新版本：[https://getsharex.com/](https://getsharex.com/)
75+
76+
### 2.2 配置 S3 上传目标
77+
78+
这是整个配置过程的核心。
79+
80+
1. 打开 ShareX，在主界面点击 `Destination settings...`。
81+
2. 在弹出的窗口左侧选择 `Amazon S3`，在右侧输入你的配置信息。
82+
3. 按照下表精确填写你的 R2 信息：
83+
84+
| ShareX 设置项 | 填写内容 | 说明 |
85+
| ------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------- |
86+
| **Access key ID** | 粘贴你保存的 `Access Key ID` | |
87+
| **Secret access key** | 粘贴你保存的 `Secret Access Key` | |
88+
| **Region** | 留空 | |
89+
| **Endpoints** | 留空 |
90+
| **Endpoint** | `https://<你的AccountID>.r2.cloudflarestorage.com` | 如果你在刚才保存过可以直接复制，切记最后没有`/`。 |
91+
| **Bucket name** | 你的 R2 存储桶名称 (例如 `your-org-images-2025`) | |
92+
| **Upload path** | `img/%y/%mo/%d/` | 按 `img/年/月/日/` 格式存放图片，有助于管理。ShareX 的变量格式是 `%`。（也可自定义） |
93+
| **Use custom domain** | **勾选此项** | |
94+
| (自定义域名输入框) | `https://<你记下的r2.dev公共URL>` | **注意**：这里只填刚才你记下的Public Development URL，不要加后面的 `$key$`。ShareX 新版本会自动处理。 |
95+
96+
97+
#### 2.2.1 关键的高级 (Advanced) 设置
98+
99+
在 S3 配置窗口的最下方，找到 **Advanced** 区域，进行如下设置：
100+
101+
* `Set public-read ACL on file`: **必须取消勾选**。R2 不支持此功能，勾选会导致 `403 Forbidden` 错误。
102+
* `Use path style request`: **必须勾选**。R2 需要这种格式的请求 URL。
103+
104+
### 2.3 将 S3 设置为默认图片上传器
105+
106+
1. 回到 ShareX 主界面。
107+
2. 点击 `Destinations` -> `Image uploader` -> `File uploader` -> 选择 `Amazon S3`。
108+
![Code_nqStY1UhqR.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/Code_nqStY1UhqR.png)
109+
110+
---
111+
112+
## 第三部分：优化 ShareX 工作流
113+
114+
### 3.1 自动复制 Markdown 链接
115+
116+
1. 在 ShareX 主界面，点击 `Task settings...`。
117+
2. 在弹出的窗口左侧选择下方的 **`Advanced`**。
118+
![ShareX_ZWFVlZZu0W.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/ShareX_ZWFVlZZu0W.png)
119+
1. 接着，点击 `After upload` 下方的 `ClipboardContentFormat`。
120+
2. 将里面的内容替换为markdown格式 `![$filename]($result)` 。
121+
122+
### 3.2 打开自动复制到剪切板
123+
124+
1. 在主页面的 `After upload tasks` -> 右侧选择 `Copy URL to clipboard`。
125+
![ShareX_zf6qftjnu6.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/ShareX_zf6qftjnu6.png)
126+
127+
### 3.3 修改热键
128+
129+
在主页面的 `Hotkey settings` 中可以修改热键，实现截图直接上传并复制markdown到剪贴板一条龙。
130+
131+
---
132+
133+
## 常见问题 (F.A.Q) 与排错
134+
135+
**Q1: 上传时报错 `(403) Forbidden`，怎么办？**
136+
**A1:** 这是最常见的问题，请检查以下两项 S3 高级设置：
137+
1. 确保 **`Set public-read ACL on file`** **没有**被勾选。
138+
2. 确保 **`Use path style request`** **已经**被勾选。
139+
3. 如果依然报错，请重新生成一个**权限为 `Object Read & Write` 的 API Token** 并更新到 ShareX 中。
140+
141+
**Q2: 我不是想上传截图，我想上传我自己本地的别的图片**
142+
**A2:**
143+
**使用左侧的upload选项卡**: 在选项卡内选择你需要的上传内容。
144+
![ShareX_34TAgHco1T.png](https://pub-85d4dcece16844bf8290aa4b33608ccd.r2.dev/ShareX/2025/09/ShareX_34TAgHco1T.png)
145+
146+
**Q3: PicGo 为什么不能用？**
147+
**A3:** 在我的测试中，PicGo 的 S3 插件与 Cloudflare R2 存在一些兼容性问题，导致文件名和路径处理不正确。ShareX 的 S3 实现更标准，是目前更可靠的选择。

0 commit comments

Comments
 (0)