使用 R2+Cloudflare Page 部署免费的图床

[shenweiyan]

原文：https://blog.lianglianglee.com/2024/01/15/cloudflare-r2-page-image-server/

背景

作为一个程序员，一般写文章都是使用 markdown 编写，可以快速复制到其他平台上。然而 markdown 有一个严重的问题，就是图片保存的问题。

刚开始我使用的 typora 作为编辑器，图片保存在 md 文件同目录的 assets 文件夹。一直以来都是自己阅读，后来有了在线阅读的需求，就自己编写了一个 markdown 阅读工具，完全根据自己的习惯编写。

后来做了博客，面临复制到博客的需求，每次编辑完，再复制图片到博客的文件夹，整个流程就繁琐了。故想一统 markdown 的图片存储。

现在的策略是使用 picgo 上传到 R2 上，然而这个工具有一个严重的问题，多客户端同步的问题。使用一段时间就不再使用了。

一直在想，能不能做一个网页版的图床，使用网页上传，最好不做元数据存储，直接读取 R2 的目录。

调研

程序员，就要自己找轮子，GitHub 上搜搜一番，找到一个还不错的工具 https://github.com/roimdev/roim-picx

已经实现了这些功能，对我来说足够了。

• 图片批量上传
• 图片列表查询
• 图片删除
• 目录创建
• 按目录查询
• 链接地址点击复制
• 简单的身份认证功能，进入管理页面需要授权

部署上去试了试，整体对我来说很适合。其文档写的也不是很完善，就简单记录一下。

部署

该项目使用了 Cloudflare 的三个能力

• KV：Token 存储
• R2：图片存储
• Page：提供页面访问

Page 中使用了 functions 作为后端服务。

准备工作

创建 KV 存储

登录 Cloudflare 账号，首页 → Workers 和 Pages → KV。

创建一个命名空间。

创建 R2 存储

进入 首页 → R2。

创建存储桶，位置可自动。

Fork 仓库

略

部署

可按照教程部署

配置

因为其使用了 KV 和 R2 存储，则需要在 Workers 和 Pages/xxxx → 设置 → 函数 中配置这两个变量。

• KV 空间命名绑定，变量名称 XK，KV 空间选刚才创建的 KV 命名空间。
  

• R2 存储桶绑定，变量名称 R2 ，R2 存储通选刚刚创建的。
  

还需要配置一个环境变量，需要在 Workers 和 Pages/xxxx → 设置 → 环境变量 中配置。

• 新增 BASE_URL，值空着不填即可。

Token 配置

如果你 Fork 的是本仓库的代码，这一步骤的配置可以忽略。

在 roimdev/roim-picx 的原始项目中其 token 是从 KV 存储中读取的，所以如果你 Fork 的是 roimdev/roim-picx 的代码则需要进入 KV 存储，然后添加条目：

• 密钥：PICX_AUTH_TOKEN，值可以自定义

然后，重新部署。

打开后，输入 PICX_AUTH_TOKEN 定义的值即可登录。

魔改

作为一个开源项目，肯定不会 100% 适合我，根据我的需求，做了一点点的改动。

• 调整文件上传的存放路径为：年/月/文件；
• 页面复制的 URL 为额外的域名+文件地址；
• KV 只用来放 Token 太浪费，Token 更改为环境变量存储；
• 修改网站的标题，Logo 等。

调整文件上传路径

原来的文件上传后，会传到根路径中，作为临时图床可以，如果作为静态图片存储，就不合适了，图片多了没办法处理。

文件名称生成在 functions/rest/utils.ts。

修改 getFileName 为 getFilePath，并做以下改动：

// 获取文件名
export async function getFilePath(val: string, time: number): Promise<string> {
    const types = supportFiles.filter(it => it.type === val)
    if (!types || types.length < 1) {
        return val
    }
    const rand = Math.floor(Math.random() * 100000)
    const fileName = randomString(time + rand).concat(`.${types[0].ext}`)
    let date = new Date()
    const year = date.getFullYear() //获取完整的年份(4位)
    let month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
    if (month < 10) {
        month = `0${month}`;
    }
    return `${year}/${month}/${fileName}`

}

修改调用方：

全局搜索 getFileName，替换成 getFilePath。

部署后，测试上传是否有问题。

增加复制地址

想法如下：原有的图片地址不变的情况下，图片属性增加一个 copyUrl 的属性，在列表，上传后返回该属性，域名配置使用环境变量。

环境变更

functions/rest/[[path]].ts

export interface Env {
  AUTH_TOKEN: string
  COPY_URL: string //新增 
  R2: R2Bucket
}

图片对象

export interface ImgItem {
    key : string
    url : string
    size: number
    copyUrl: string
    filename ?: string
}

API 返回

functions/rest/routes/index.ts

// list接口
 return <ImgItem>{
            url: `/rest/${it.key}`,
            copyUrl: `${env.COPY_URL}/${it.key}`,
            key: it.key,
            size: it.size
  }
  // 上传接口
  urls.push({
                key: object.key,
                size: object.size,
                copyUrl: `${env.COPY_URL}/${object.key}`,
                url: `/rest/${object.key}`,
                filename: item.name
           })

列表页面

1. 传递参数
   src/views/ManageImages.vue

// image-box 增加copyUrl传递

<image-box
	:src="item.url"
    :copyUrl="item.copyUrl"
	:name="item.key"
    :size="item.size"
	@delete="deleteImage(item.key)"
	mode="uploaded"
/>

2. 接受入参
   src\components\ImageBox.vue

// 接受入参
const props = defineProps<{
	src: string
	copyUrl:string // 新增 
	name: string
	size: number
	mode: 'converted' | 'uploaded'
	uploadedAt?: number
	expiresAt?: number
}>()

---
//copyLink 方法入参修改为：copyUrl
	@click="copyLink(copyUrl)"

上传页面

src/components/ImageItem.vue

将 htmlLink, markdownLink, LINK 这三个地方的 url 改成 copyUrl。

Token 使用环境变量存储

环境变量在 functions/rest/[[path]].ts。

export interface Env {
  AUTH_TOKEN: string
  COPY_URL: string
  R2: R2Bucket
}

调用方修改 functions/rest/routes/index.ts。

await env.XK.get('PICX_AUTH_TOKEN')
// 修改为：
env.AUTH_TOKEN;

新增环境变量：AUTH_TOKEN。

环境变量修改完成后，记得重新部署！

修改网站标题

网站首页在 src/App.vue。

直接修改部署即可。

其他

魔改后的代码地址：https://github.com/liangliangle/roim-picx