云端存储配置

配置图片云端存储,支持 Cloudflare R2 和阿里云 OSS。不配置也可正常使用(图片保存在本地浏览器)。

当前状态

存储类型: 检查中...
连接状态: 检查中...
localStorage 使用: 检查中...
IndexedDB 状态: 检查中...

配置教程

下面两份教程帮助你从 0 开始配置自己的云端存储。推荐国内用户用阿里云 OSS,海外用户用 Cloudflare R2。

阿里云 OSS 配置教程

1创建 Bucket

  1. 登录 阿里云 OSS 控制台
  2. 点击 Bucket 列表 → 创建 Bucket
  3. 区域:建议选离你最近的(如"华东1-杭州");记住这个区域,下面填 Endpoint 用
  4. 读写权限:选 公共读(生成的图片需要直接通过 URL 访问)
  5. Bucket 名称:全局唯一,3–63 位小写字母数字和短横线

2创建子账号和 AccessKey(推荐)

⚠️ 不要用主账号 AccessKey——主账号密钥泄露代价过大,务必创建只有 OSS 权限的 RAM 子账号。

  1. 打开 RAM 访问控制 → 用户,创建用户,勾选 OpenAPI 调用访问
  2. 创建完成后立即保存 AccessKey ID 和 Secret(Secret 只显示一次!)
  3. 给这个用户添加权限:附加 AliyunOSSFullAccess(或更精细的自定义策略,只允许访问这一个 Bucket)
更安全的最小权限策略(替代 AliyunOSSFullAccess):把下面 JSON 中的 apiyi 改成你的 Bucket 名,粘贴到 RAM 自定义策略即可。
{
  "Version": "1",
  "Statement": [{
    "Effect": "Allow",
    "Action": ["oss:PutObject", "oss:GetObject", "oss:DeleteObject"],
    "Resource": ["acs:oss:*:*:apiyi/*"]
  }]
}

3配置 CORS 跨域规则(必须)

浏览器直接请求 OSS 需要 CORS 放行,否则请求会被浏览器拦截。

  1. Bucket 详情页 → 数据安全 → 跨域设置 → 创建规则
  2. 填写:
    • 来源:*(或填你的域名,如 https://yourdomain.com)
    • 允许 Methods:勾选 GETPUTDELETEPOSTHEAD
    • 允许 Headers:*
    • 暴露 Headers:ETag
    • 缓存时间:600

4填入本页表单

字段说明示例
EndpointBucket 所在区域的外网域名oss-cn-hangzhou.aliyuncs.com
Bucket 名称刚创建的 Bucket 名apiyi
AccessKey ID子账号的 AccessKey IDLTAI5t...
AccessKey Secret子账号的 Secret(复制时注意别漏字符)
路径前缀图片存放的"子目录",方便和其他文件隔离ai-images/

💡 常见 Endpoint:杭州 oss-cn-hangzhou、北京 oss-cn-beijing、上海 oss-cn-shanghai、深圳 oss-cn-shenzhen、香港 oss-cn-hongkong。后面加 .aliyuncs.com

5测试连接

点击本页上方 测试连接,成功会提示 "OSS 连接成功"。失败时页面会显示错误码和 StringToSign 对比,按建议排查即可。

❗ 常见错误
  • SignatureDoesNotMatch:99% 是 AccessKey Secret 复制错了(漏字符、多空格)。重新从 RAM 控制台复制粘贴。
  • NoSuchBucket:Bucket 名拼错,或 Endpoint 区域和 Bucket 实际区域不匹配。
  • AccessDenied:RAM 用户没有 OSS 权限,回到第 2 步授权。
  • 跨域错误(Console 报 CORS):CORS 规则没配或没保存,回到第 3 步。
  • 图片无法访问(403):Bucket 读写权限没设为 公共读
💰 费用提示

阿里云 OSS 有免费额度(每月 5GB 存储 + 10GB 下载流量),个人用足够。超量后按量计费,具体见 定价页。建议开启 消费预警 防止意外扣费。

Cloudflare R2 配置教程
架构说明:本应用通过一个 Cloudflare Worker 作为中间代理写入 R2,不直接暴露 R2 凭证。所以你需要先部署一个 Worker,然后把 Worker URL 填回这里。Worker 源码已在项目 workers/ 目录下准备好。

1注册 Cloudflare + 开通 R2

  1. 注册 Cloudflare 账号(免费)
  2. 进入控制台左侧 R2 Object Storage,首次使用会要求绑定支付方式(即使只用免费额度也要绑定,不会自动扣费)
  3. 创建 Bucket:名称自取,如 ai-images-cache;区域选 Automatic

2安装 wrangler 并登录

wrangler 是 Cloudflare 官方命令行工具,用来部署 Worker。

# 需要 Node.js 16+
npm install -g wrangler

# 浏览器会打开授权页面,点确认
wrangler login

3部署 Worker

本项目仓库下已有现成 Worker 代码:

# 进入项目的 workers 目录
cd workers

# 编辑 wrangler.toml,把 bucket_name 改成你刚创建的 R2 Bucket 名
# [[r2_buckets]]
# binding = "IMAGE_BUCKET"
# bucket_name = "ai-images-cache"   ← 改成你的 Bucket 名

# 部署
wrangler deploy

部署成功会输出一条 URL,形如:

https://ai-image-proxy.你的子域名.workers.dev

📌 复制这个 URL,下一步要用。

4填入本页表单

  1. 在本页顶部存储类型选 自定义 R2
  2. 把刚才复制的 Worker URL 粘贴到 Worker URL 输入框
  3. 测试连接保存配置

5验证 R2 在工作

  1. 回到主应用生成一张图
  2. 打开 Console (F12),看到 图片已成功上传到 R2 即成功
  3. Cloudflare 控制台 R2 Bucket 里会看到图片文件
❗ 常见错误
  • wrangler deploy 失败 "R2 bucket not found":wrangler.toml 里 bucket_name 和你实际创建的 R2 Bucket 名不一致。
  • Worker 响应 500:Worker 代码里环境变量没设对,查看 Cloudflare 控制台 → Workers → 你的 Worker → Logs。
  • 测试连接超时:Worker URL 填错(比如少了 https://)。
  • 国内访问慢:Workers 免费套餐有区域限制,国内访问可能需要自定义域名解析到国内 CDN,或改用阿里云 OSS。
💰 费用提示

R2 免费额度很慷慨:每月 10GB 存储 + 100 万次 Class A 操作(写)+ 1000 万次 Class B 操作(读)+ 零出站流量费。个人项目基本完全免费,是 S3 的高性价比替代。

详细教程:docs/DEPLOY-R2.md · docs/R2-QUICK-START.md