目的

藉由圖片上傳工具，讓寫作、筆記時，可以將圖片存到 cloudflare r2 空間

原因

全球最大圖床之一的 Imgur 是許多網友的最熟悉放圖工具之一，大約從 2025 年 5 月 16 日上午開始，Imgur 開始針對台灣地區的ip進行封鎖，使用國外ip可以，原因尚未對外公開說明，這讓原本使用 imgur 的人都開始找備案

為什麼要用 cloudflare r2 呢？

  • 因為雖然是免費，但超過用量也是要付費的，而且至少是類似在自己的雲端硬碟上
  • cloudflare 有一堆 CDN，速度也算快

以下有簡單比較 image.png

使用工具

安裝步驟

install picgo-core

npm install picgo -g

install s3 plugin

picgo install picgo-plugin-s3

設定

使用 set uploader 指令，會有選項出來，只要依照步驟填寫即可

picgo set uploader

image.png

選項有這些，不確定的就直接按 enter、已廢棄的不用填

image.png

調整設定檔

如果有 custom domain 上面設定好之後，要到 /Users/user/.picgo/config.json去調整 outputURLPattern 這樣上傳圖片後 ，這樣最後輸出的連結才會正確連到 r2 圖片

原本設定是，uploadPath 如果沒有特別要求就不用動

"uploadPath": "{year}/{month}/{fileName}.{extName}",
"outputURLPattern": ""

調整邏輯就是：custom domain + uploadPath 但不能直接複製貼上 uploadPath，因為同樣的 fileName，在不同變數會有不同的結果

  • uploadPath 的 fileName 沒有包含副檔名（extName）
  • outputURLPattern 的 fileName 有包含副檔名

也不能使用 path會包含 bucket name，這樣也沒辦法正確連到圖片 所以必須用組合的方式，把網址組合出來

"uploadPath": "{year}/{month}/{fileName}.{extName}",
"outputURLPattern": "https://pic.staynotes.dev/{year}/{month}/{fileName}"

完成

設定好之後，直接使用 cli 輸入 picgo upload 如果都沒問題，就會成功上傳了，且網址也會是對的！ image.png