中文 | English

R2 Web

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

本项目有幸被 《科技爱好者周刊（第 387 期）》 和 《HelloGitHub（第 123 期）》 推荐，在此表示感谢！同时也欢迎大家试用并提出宝贵意见，一起把这个工具做得更好用、更顺手！

在线使用

跟随 下方指引 开启 CORS，然后访问 r2.viki.moe 立即开始管理 R2 桶。

私有部署

这里提供几个常见的静态托管平台部署选项，点击按钮即可一键部署：

平台	快速部署
Vercel
Netlify
Cloudflare Pages

如果用得不错，别忘了点个免费的小星星 ✨，对这个项目很重要，非常感谢～

其他服务只需部署 src 目录即可，部署后记得更新 CORS 规则允许你的域名访问 R2 API。

反馈途径

• GitHub Issues - 提交 bug 报告、功能建议
• 反馈 QQ 群 - 即时交流、使用反馈（群号：1091212613）

为什么是 R2 Web？

传统方案痛点：

• 官方控制台功能基础，登录、管理麻烦，无法高效管理大量文件（复制、移动、重命名等）
• 第三方客户端要下载安装，跨平台麻烦
• 命令行工具上手门槛高，不适合临时操作
• 其他 Web 项目不专注 R2，功能不完善，体验欠佳

R2 Web 解决的问题：

• 打开浏览器就能用，跨平台零成本
• 拖拽、粘贴上传 + 图片压缩，省流量省时间
• PWA 支持，装到桌面像原生应用
• 纯前端实现，数据不经过第三方服务器

R2 Web 无法替代的场景：

• 超大文件上传（>300MB），建议使用 rclone 等工具
• 复杂权限管理，建议使用官方控制台或 API
• 自动化脚本，建议使用官方 SDK 或 CLI
• API 集成，无后端服务，建议使用官方 SDK 或直接调用 R2 API

使用场景

• 文件管理: 目录浏览、重命名、移动、删除，轻松管理大量文件。
• 文件浏览: 内置图片/视频/音频/文本预览，快速查看内容无需下载。
• 私有图床: 拖拽/粘贴上传，自动压缩，复制为 Markdown/HTML 格式。

设计理念

• 零构建，源码即产物，无需编译打包
• 零框架，原生 Web 技术优先，不依赖框架
• 零后端，所有逻辑在浏览器中完成，直连 R2 API
• 极简美学，黑白灰 + R2 橙色，小圆角、扁平化
• 性能至上，懒加载、防抖节流、请求缓存
• 细节优先，流畅动画、及时反馈、键盘导航

界面截图

功能速览

功能类别	具体功能
文件管理	目录浏览、分页加载、懒加载缩略图；按名称/日期/大小排序；重命名、移动、复制、删除（支持递归）；多选批量删除、复制、移动
文件上传	拖拽/粘贴/选择器上传；文件名模板（哈希、日期、UUID 等占位符）；上传前自动压缩图片（WebAssembly）
文件预览	图片预览（常见格式）；视频/音频内嵌播放器；文本文件预览（代码高亮）
链接复制	URL 直链、Markdown、HTML、预签名 URL
个性化	简体/繁体/英语/日语；深色模式（跟随系统）；配置分享链接/二维码
PWA	安装到桌面，原生体验

快速开始

1. 配置 R2 桶 CORS

在 Cloudflare 控制台配置 CORS 规则（路径：R2 → 存储桶 → 设置 → CORS 策略）：

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

Tip

私有部署？ 把 AllowedOrigins 改成你的域名即可。

2. 填写凭证连接

访问 r2.viki.moe，填写 R2 凭证进行连接。凭证只存储在浏览器 localStorage，不会上传。

3. 开始使用

开始管理文件、目录，拖拽文件、直接 Ctrl + V 即可上传，右键文件可进行重命名、复制链接等操作。

如果当作图床使用，建议设置文件名模板，生成带哈希的唯一文件名、开启图片压缩，提升性能和安全性。

实用技巧

文件名模板示例

• [name]_[hash:6].[ext] - 原文件名 + 6 位哈希（默认）
• images/[date:YYYY/MM/DD]/[uuid].[ext] - 按日期分目录
• backup/[timestamp]-[name].[ext] - 时间戳前缀备份

配置分享链接

生成「配置分享链接」或「配置分享二维码」，快速在多设备同步配置。

Caution

链接包含 R2 访问凭证，请不要直接分享到公共平台。

缓存优化

项目内置支持请求缓存，对目录内容等常见频繁请求返回数据进行了缓存。

对于 CDN 缓存，建议在 Cloudflare 控制台配置缓存规则提升加载速度。

技术实现

纯前端应用，无构建步骤，代码写完即可部署。

核心技术： HTML5/CSS3/ES6+，CSS Layers、原生 <dialog>、原生 Fetch、Import Maps、WebAssembly

依赖库：

• aws4fetch - AWS4 请求签名，处理 R2 S3 API
• dayjs - 日期格式化
• @jsquash/* - WebAssembly 图片压缩（MozJPEG、OxiPNG、libwebp、libavif）
• qrcode - 二维码生成

无需： Node.js、Webpack、Vite、React、Vue 等构建工具和框架，保持项目轻盈和零依赖。

本地开发

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

# 安装依赖（仅用于类型提示）
pnpm install

# 启动本地服务器
npx serve src
# 或
python3 -m http.server 5500 --directory src

详细开发指南见 CLAUDE.md。

FAQ

Q: 凭证安全吗？

A: 凭证只存储在浏览器 localStorage，不会上传到任何服务器。建议使用指定 bucket、非管理员读写权限的 API 令牌。

Q: 支持哪些浏览器？

A: 现代浏览器（Chrome/Edge/Firefox/Safari 最新版），不考虑 IE 兼容。

Q: 图片压缩在哪里进行？

A: 本地压缩使用 WebAssembly，完全在浏览器中完成，文件不会上传到第三方服务器。如果使用云压缩（Tinify 服务），则会将图片上传到 Tinify 服务器进行压缩。

Q: 可以私有部署吗？

A: 可以，fork 仓库后修改 CORS 配置中的 AllowedOrigins，部署到任意静态托管服务（Cloudflare Pages、Vercel、Netlify 等）。

Q: 配置分享链接包含什么信息？

A: 包含访问密钥 ID、秘密访问密钥、存储桶名称等敏感信息，请勿公开分享。

Q: 为什么上传失败？

A: 检查 CORS 配置是否正确、凭证是否有效、文件是否超过 300MB（大文件建议用 rclone）。

后续计划

• 持续优化 UI/UX，增加更多快捷操作

开发故事

项目使用 Claude 4.6 Opus 模型 Vibe Coding 完成，需求到实现纯手工提示词驱动。初始架构和开发设计的提示词可以参考 plan.md。

License

MIT License