r2-web

中文 | English

R2 Web

📁 轻盈优雅的 Web 原生 Cloudflare R2 文件管理器，一切皆在浏览器中完成。

本项目曾被 《科技爱好者周刊（第 387 期）》 和 《HelloGitHub（第 123 期）》 推荐。

在线使用

按 快速开始 配置 R2 CORS，然后访问 r2.viki.moe。凭证只保存在浏览器本地。

为什么做 R2 Web？

Cloudflare 控制台适合基础操作，但大量文件的浏览、移动、重命名和临时上传并不高效；桌面客户端需要安装，CLI 又不适合所有人。R2 Web 希望补上一个随开随用、跨平台且专注 R2 的管理界面。

差异化优势

优势	说明
纯客户端直连	浏览器直接调用 R2 S3 API，没有中转服务器，文件和凭证不经过第三方后端
零构建、零框架	src 即部署产物，基于原生 Web API，便于审计、修改和私有部署
大文件体验	自动分片，支持暂停/继续、实时速度和大小进度，最大支持 1 TiB
专注文件管理	目录浏览、预览、排序、批量选择，以及复制、移动、重命名、递归删除
图床友好	拖拽/粘贴上传、文件名模板、本地图片压缩、Markdown/HTML 链接复制
跨平台体验	PWA、深色模式和 zh / zh_TW / en / ja 多语言支持

R2 Web 不替代复杂权限管理、自动化脚本或 API 集成；这些场景建议使用 Cloudflare 控制台、官方 SDK、CLI 或 rclone。

功能速览

类别	能力
浏览与管理	分页目录、懒加载缩略图、名称/日期/大小排序、批量复制/移动/删除
分片上传	选择、拖拽、粘贴；并发上传；自动分片；暂停/继续；冲突处理
文件名模板	[name]、[ext]、[hash:N]、日期、时间戳、UUID 和目录模板
图片压缩	JPEG、PNG、WebP、AVIF 本地 WebAssembly 压缩，也可选 Tinify
预览与分享	图片、视频、音频、文本预览；直链、二维码、Markdown、HTML 格式
个性化	网格/列表、显示密度、浅色/深色主题、多语言、PWA

界面截图

快速开始

1. 配置 R2 桶 CORS

在 Cloudflare 控制台进入 R2 → 存储桶 → 设置 → CORS 策略：

[
  {
    "AllowedOrigins": ["https://r2.viki.moe"],
    "AllowedMethods": ["GET", "POST", "PUT", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 86400
  }
]

私有部署时，将 AllowedOrigins 替换为自己的域名。ETag 是完成分片上传所必需的响应头。

2. 创建并填写凭证

创建权限限定到目标 bucket 的 R2 API Token，在 r2.viki.moe 填写 Account ID、Access Key ID、Secret Access Key 和 Bucket Name。

3. 开始管理

拖拽、粘贴或点击上传；右键文件可预览、复制链接、移动、重命名或删除。作为图床使用时，建议启用文件名模板和图片压缩。

私有部署

R2 Web 是静态站点，部署仓库中的 src 目录即可。

平台	一键部署
Vercel
Netlify
Cloudflare Pages

部署完成后，请将新域名加入 R2 CORS 的 AllowedOrigins。

常用配置

文件名模板

• [name]_[hash:6].[ext] — 原文件名 + 内容哈希
• images/[date:YYYY/MM/DD]/[uuid].[ext] — 按日期组织目录
• backup/[timestamp]-[name].[ext] — 时间戳备份文件名

配置分享

可以生成配置分享链接或二维码，在设备间快速同步设置。

本地开发

git clone https://github.com/vikiboss/r2-web.git
cd r2-web
pnpm install

npx serve src
# 或
python3 -m http.server 5500 --directory src

项目不需要构建；依赖主要用于浏览器 Import Maps 和本地类型检查。开发约定见 AGENTS.md。

FAQ

凭证安全吗？ 凭证仅存储在浏览器 localStorage，请求直接发送到 R2。仍建议使用限定 bucket 和最小权限的 API Token。

支持哪些浏览器？ 支持最新版 Chrome、Edge、Firefox 和 Safari，不支持 IE。

图片压缩在哪里进行？ 本地模式使用 WebAssembly 在浏览器内完成；选择 Tinify 时，图片会发送到 Tinify 服务。

为什么上传失败？ 检查凭证、bucket 权限和 CORS。分片上传要求允许 POST / PUT / DELETE 并暴露 ETag；单文件不能超过 1 TiB。

反馈

• GitHub Issues — Bug 与功能建议
• 反馈 QQ 群 — 群号：1091212613

License

MIT License