結果圖#
原理#
圖源由 Cloudflare R2 托管，通過兩個 Workers 連接 R2 以展示隨機圖片，靜態頁面引用 Workers 的 URL 以實現以上界面
創建 Cloudflare R2 存儲桶#
R2 實際上是一個對象存儲。Cloudflare 提供 10G 的免費存儲和每月 1000 萬次的免費訪問
- 進入Cloudflare 儀表盤，進入 R2 頁面，如圖
- 選擇創建存儲桶
- 為你的存儲桶起一個名字，然後單擊創建
- 進入如下頁面就已經創建完畢了
- 返回 R2 首頁。因為在下文我們需要使用 API 來進行文件傳輸，所以需要創建你的 R2 API 令牌，單擊管理 R2 API 令牌
- 單擊創建 API 令牌，如圖
- 因為我們需要該 API 來管理單個 R2 存儲桶，所以選擇對象讀和寫，詳細配置如圖
- 創建 API 令牌後，新頁面會展示令牌的詳細信息，** 僅會展示一次！！！** 保持這個頁面，直到你將該頁面的所有信息都已經妥善保存，不要關閉界面，否則，你需要輪轉 API 令牌以禁用之前的舊密鑰，如圖
- 確保你已經妥善保存你的 R2 API 令牌，然後進行下一步
為你的存儲桶添加文件#
因為 Web 界面傳輸文件較慢且不支持傳輸大於 300MB 的文件。這裡使用本地部署 AList 然後連接你的 R2 存儲桶實現高速上傳
- 筆者使用 Windows。前往AList - Github Release下載適用於 Windows 的最新可執行文件，如圖
- 將下載的壓縮包解壓，並將其中的
alist.exe放入一個空文件夾 - 單擊搜索框，輸入 cmd 並回車，如圖
4. 在 cmd 中輸入alist.exe server並且不要關閉窗口，運行成功後如圖
5. 打開瀏覽器，輸入localhost:5244即可進入 AList 控制台，如圖
6. 用戶名：admin密碼：在cmd窗口中，如圖。你可以使用鼠標左鍵在終端中框選內容然後單擊鼠標右鍵進行複製操作
7. 注意，在 cmd 中，鼠標左鍵點擊或拖動 cmd 的終端界面會導致進入選擇狀態，程序將會被系統阻塞，需要在終端界面點按鼠標右鍵解除。若進程被阻塞，cmd 的進程名會多一個選擇，請注意。如圖是程序被阻塞的例子，在終端界面點按鼠標右鍵即可解除
8. 現在，你已經成功以管理員身份登入了 AList，
9. 單擊最下面的管理
10. 你會進入到如圖界面。儘管 AList 運行在本地，也建議更改你的用戶名和密碼
11. 更改帳密，重新以新帳密登錄
12. 進入控制台，然後單擊存儲，如圖
13. 選擇添加，如圖
14. 詳細配置如圖。掛載路徑即 AList 展示路徑，推薦使用/R2/你的存儲桶名字，地區為auto，根文件夾路徑為/（圖上填反了 Orz）
15. 回到主頁，如圖
16. 嘗試上傳文件，如圖
17. 可以看到，速度非常快
18. 為你的圖床創建目錄以分類橫屏和豎屏圖等，以便下文使用 Workers 連接 R2 來調用。後文我將使用/ri/h作為橫屏隨機圖目錄、/ri/v作為豎屏隨機圖目錄
創建 Workers，連接 R2#
- 進入Cloudflare 儀表盤，進入 Workers 和 Pages 頁面，如圖
- 單擊創建，選擇創建 Workers，名稱自取，單擊部署
- 選擇編輯代碼
- 粘貼代碼（創建隨機橫屏圖）：
export default {
async fetch(request, env, ctx) {
// R2 bucket 配置
const bucket = env.MY_BUCKET;
try {
// 列出 /ri/h 目錄下的所有對象
const objects = await bucket.list({ prefix: 'ri/h/' });
// 從列表中隨機選擇一個對象
const items = objects.objects;
if (items.length === 0) {
return new Response('No images found', { status: 404 });
}
const randomItem = items[Math.floor(Math.random() * items.length)];
// 獲取選中對象
const object = await bucket.get(randomItem.key);
if (!object) {
return new Response('Image not found', { status: 404 });
}
// 設置適當的 Content-Type
const headers = new Headers();
headers.set('Content-Type', object.httpMetadata.contentType || 'image/jpeg');
// 返回圖片內容
return new Response(object.body, { headers });
} catch (error) {
console.error('Error:', error);
return new Response('Internal Server Error', { status: 500 });
}
},
};
- 點擊左側的文件圖標
- 在
wrangler.toml中填入：
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "114514"
-
保存修改，點擊右上角的部署
-
在設置 - 變量找到 R2 存儲桶綁定，添加你的存儲桶，變量名即上文的
MY_BUCKET
-
在設置 - 觸發器添加你的自定義域名以便訪問
- 訪問效果，每次刷新都不一樣
通過使用 HTML 的 <img> 標籤引用即可達到開頭的效果#
如：<img src="你的域名" alt="">