online-order-vue/docs/cloudflare-r2.md

Cloudflare R2 存储配置

用于 ifoodme.com 在线点餐系统的文件存储服务

存储桶信息

属性	值
存储桶名称	ifoodorder-files
位置	Asia Pacific (自动)
存储类型	Standard
公共访问	Enabled
自定义域名	https://files.ifoodme.com
创建时间	2026-01-12

Cloudflare 账户信息

属性	值
Account ID	d31caaf9d62da3682d7d98e07f8b96d5
S3 API Endpoint	https://d31caaf9d62da3682d7d98e07f8b96d5.r2.cloudflarestorage.com

API 凭证 (S3 兼容)

属性	值
Access Key ID	e5b42f61dbdf88cc478ed42bc8645277
Secret Access Key	ceae657c6949b0b4ef27921ab14a63a52de57718f5603e3221f904dc7b5335a3
权限	Object Read & Write
适用存储桶	ifoodorder-files
TTL	Forever

注意: Secret Access Key 只在创建时显示一次，请妥善保存！

使用方式

1. S3 兼容 API

R2 支持 S3 兼容的 API，可以使用 AWS SDK 或其他 S3 客户端访问。

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const s3Client = new S3Client({
  region: 'auto',
  endpoint: 'https://d31caaf9d62da3682d7d98e07f8b96d5.r2.cloudflarestorage.com',
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
  },
})

// 上传文件
const uploadFile = async (key: string, body: Buffer) => {
  const command = new PutObjectCommand({
    Bucket: 'ifoodorder-files',
    Key: key,
    Body: body,
  })
  return s3Client.send(command)
}

2. Workers 绑定

在 Cloudflare Workers 中可以直接绑定 R2 存储桶：

# wrangler.toml
[[r2_buckets]]
binding = "BUCKET"
bucket_name = "ifoodorder-files"

// Worker 中使用
export default {
  async fetch(request, env) {
    // 上传
    await env.BUCKET.put('file.txt', 'Hello World')

    // 读取
    const object = await env.BUCKET.get('file.txt')
    return new Response(object.body)
  }
}

文件访问

通过自定义域名访问存储的文件：

https://files.ifoodme.com/{文件路径}

示例：

• https://files.ifoodme.com/test.json
• https://files.ifoodme.com/images/product.png

R2 是平面存储，不需要预先创建文件夹。上传时直接指定路径即可（如 images/xxx.png）。

AWS CLI 上传示例

AWS_ACCESS_KEY_ID=e5b42f61dbdf88cc478ed42bc8645277 \
AWS_SECRET_ACCESS_KEY=ceae657c6949b0b4ef27921ab14a63a52de57718f5603e3221f904dc7b5335a3 \
aws s3 cp ./local-file.png s3://ifoodorder-files/images/remote-file.png \
--endpoint-url https://d31caaf9d62da3682d7d98e07f8b96d5.r2.cloudflarestorage.com \
--region auto

环境变量配置

在 .env.local 或服务器环境中配置：

# Cloudflare R2 配置
R2_ACCESS_KEY_ID=e5b42f61dbdf88cc478ed42bc8645277
R2_SECRET_ACCESS_KEY=ceae657c6949b0b4ef27921ab14a63a52de57718f5603e3221f904dc7b5335a3
R2_BUCKET_NAME=ifoodorder-files
R2_ENDPOINT=https://d31caaf9d62da3682d7d98e07f8b96d5.r2.cloudflarestorage.com

待配置项

• 创建 API Token (Access Key / Secret Key) ✅ 已完成
• 配置公共访问 ✅ 已启用
• 绑定自定义域名 files.ifoodme.com ✅ 已完成
• 配置 CORS 规则 (如前端直传)

相关链接

• Cloudflare R2 控制台
• R2 官方文档
• S3 兼容 API 文档