背景
之前我们使用图床是用 picGo 上传到 R2 上，然而这个工具有一个严重的问题，多客户端同步的问题。使用一段时间就不再使用了。 一直在想，能不能做一个网页版的图床，使用网页上传，最好不做元数据存储，直接读取 R2 的目录。
调研
站在巨人的肩膀行走事半功倍，我开始找轮子，github 上搜了搜，找到一个还不错的工具 liangliangle/roim-picx， 已经实现了我想要的功能，对我来说足够了
- 图片批量上传
- 图片列表查询
- 图片删除
- 目录创建
- 按目录查询
- 链接地址点击复制
- 简单的身份认证功能，进入管理页面需要授权
部署上去试了试，整体对我来说很适合，简单记录一下部署过程。
部署
该项目使用了 Cloudflare 的两个能力
- R2：图片存储
- Pages：提供页面访问
Pages 中使用了 functions 作为后端服务，步骤如下：
1. fork 项目到自己的 github
fork 完项目后可以根据自己需要修改网站标题和链接地址，网站首页在src\App.vue
2. 创建 Pages 项目
输入编译参数
框架预设：无
构建命令：npm run build
输出目录：dist
3. 设置环境变量和绑定 R2
1.环境变量：
- AUTH_TOKEN：授权码
- COPY_URL：复制的路径，如无，则输入 pages域名/rest
2.绑定R2
变量名为：R2
4. 重新部署让环境变量生效
魔改
使用过程中发现原作者一些小细节功能没有我需要的，我在他的基础上做了修改
1. 图片链接复制格式选择
2. 图片预览
魔改后的代码地址：waveCodeSite/roim-picx
...