PandaC's Blog

Appearance

WinSCP+Cloudflare R2 ​

拥抱Cloudflare R2，实现视频资源和文件资源的在线存储与在线展示

链接WinSCP，将本地与云端同步

Cloudflare R2 ​

Cloudflare R2介绍 ​

核心优势： 零流量费 (Zero Egress Fees)。这是它打败阿里云 OSS、腾讯云 COS 的杀手锏。传统 OSS 最贵的是“下行流量费”，视频看的人多了，或者课件被下载多了，房子都要赔进去。但 Cloudflare R2 的流量是 免费的

画质与原件： 你上传什么文件，它就分发什么文件。没有任何二次压缩

费用：

  • 流量费： $0 (无论多少人看视频或下载 PPT，都不收流量费)
  • 存储费： 前 10GB 免费。超过后 $0.015 / GB（极其便宜，存 100GB 视频才 1.5 美元/月）
  • 请求次数： 有免费额度，个人博客很难用完

速度： 走 Cloudflare 的全球 CDN 节点，速度通常不错（国内访问可能受限于 CF 的连接状况，但比 GitHub 直连快）

适用场景（新增）：

  • 视频：Vlog、演示录屏（配合 ArtPlayer）
  • 通用文件：Word、PPT、Excel、PDF、Zip 压缩包、代码文件（配合 FileCard 组件提供下载）

准备PayPal账户-开通Cloudflare的前提 ​

我的疑问 ​

好像这个R2对象存储要先开通支付账户啊？我没有国外的支付卡，我只有国内银行卡和支付方式，怎么办呢？

解决办法 ​

尝试 PayPal（国内版）+ 银联卡

Cloudflare 是支持 PayPal 支付的。好消息是，中国区的 PayPal 账户是可以绑定国内银联卡（储蓄卡/信用卡）的

虽然不能保证 100% 成功（有时候 Cloudflare 的风控比较严），但这是成本最低的尝试方法，值得一试：

  1. 注册 PayPal： 去 PayPal 中国官网注册一个个人账户
  2. 绑定银联卡： 在钱包里绑定你的国内银行卡（由于会涉及到美元换汇，建议绑定一张余额充足的储蓄卡或者信用卡）
  3. 去 Cloudflare 绑定：
    • 在 Cloudflare 后台 -> Billing -> Payment Info
    • 选择 PayPal 作为支付方式
    • 跳转登录后，如果能扣款验证成功（通常是 $0 或 $1 的验证），那 R2 就能开了

注意：如果 Cloudflare 提示“需要添加信用卡来完成购买”，那就说明它识别出了你的 PayPal 资金来源不是国际信用卡，这一招就失效了

配置流程 ​

  1. 创建存储桶：

    • Cloudflare 面板 -> 左侧 R2 -> Create bucket (随便起名，如 my-blog-videos和my-blog-files)

  2. 上传资源（视频、文件）：

    A：直接在页面上点击 Upload，把你的高清视频传上去。例如上传一个名为我的大作.mp4的视频

    B：S3 客户端上传 (推荐，适合批量管理) R2 兼容 S3 协议，推荐下载 S3 Browser (Windows) 或 Cyberduck (Mac/Win) 软件。配置好 R2 的 Key 之后，就能像管理本地文件夹一样管理云端文件（新建文件夹、批量拖拽上传），管理大量 PPT 和代码包极其方便

  3. 开启公开访问 (Public Access)：

    • 进入 Bucket -> Settings -> Public Access
    • 点击 "Connect Domain"
    • 你可以分配一个二级域名（比如 video.你的域名.com，files.你的域名.com）或者直接用它提供的 r2.dev 子域名（但在部分网络环境受限，建议绑定自己的自定义域名）

  4. 获取链接：

    • 绑定好域名后，你的视频链接就是：https://video.你的域名.com/我的大作.mp4

    • 文件链接就是：https://files.你的域名.com/docs/复习提纲.docx

      获取域名详见：网站域名

  5. 在博客里使用：

    回到你的 Markdown 文章中，根据资源类型选择不同的组件：

    场景一：插入视频 使用 MyPlayer 组件（支持 HLS/MP4）：

    html
    <MyPlayer 
  url="https://files.你的域名.com/videos/vlog01.mp4" 
  title="我的大作" 
/>

    场景二：提供文件下载（新增） 使用 FileCard 组件（支持 Word/PPT/Excel/Zip/Code）：

    html
    <FileCard 
  name="计算机网络复习提纲.docx" 
  url="https://files.你的域名.com/docs/review.docx" 
  size="2.4MB" 
  type="word" 
/>

生成S3密钥 ​

  1. 进入R2 Object Storage页面，找到Account Details区域
  2. 点击 API Tokens 右侧的那个 Manage (管理) 按钮
  3. 进入新页面后，点击右上角蓝色的 Create API token (创建 API 令牌) 按钮
  4. ⚠️ 极其关键的权限配置（这决定了你能不能上传以及能不能看到双桶）：
    • Permissions (权限)：点开下拉菜单，必须选择 Object Read & Write (对象读和写)。只有选了这个，你才有往里面拖拽上传文件的权限。
    • Specify bucket(s) (指定存储桶)：必须选择 Apply to all buckets (应用于所有存储桶)。这是 WinSCP 能够读取根目录、让你同时并排看到 my-blog-videos 和 my-blog-files 的大前提。
  5. 剩下的选项（如 TTL 过期时间）保持默认即可，直接滚动到最底部点击 Create API Token。

极其重要的一步：配置 R2 的 CORS (防翻车指南) ​

因为你的博客域名是 pandac-blog.com，而视频域名是 videos.pandac-blog.com还有文件域名是files.pandac-blog.com。 浏览器出于安全考虑，可能会阻止“跨域”播放视频（尤其是用 ArtPlayer 截图功能时，或者加载字幕时）

  • 视频播放需要 (HLS/截图)： 如果你在这个新桶里放了视频，并且用 ArtPlayer 播放，播放器会试图去读取视频的数据流（用来做缓冲、显示波形图、截图等）。如果没有 CORS，浏览器会直接拦截，导致视频黑屏或者截图失败。

  • JS 预加载/获取大小： 虽然 <a href="..."> 下载不需要 CORS，但如果我们以后的 FileCard 组件想要用 JavaScript 自动获取文件大小（显示 "2.4MB" 而不是让你手写），或者做一个“点击复制文件内容”的功能，这些都需要 CORS 许可。

  • 字体/SVG 图标： 如果你把网页用到的一些特殊字体或 SVG 图标放在 R2 里引用，没有 CORS 它们会直接加载失败。

必须去 Cloudflare 后台设置一下 R2 的 CORS 规则：

  1. 登录 Cloudflare -> R2 -> 点击你的存储桶 (Bucket)。
  2. 点击 Settings (设置) 选项卡。
  3. 往下拉找到 CORS Policy (CORS 策略)。
  4. 点击 Add/Edit CORS Policy，粘贴以下 JSON 代码：
json
[
  {
    "AllowedOrigins": [
      "http://localhost:5173",
      "https://pandac-blog.com",
      "https://www.pandac-blog.com",
      "https://my-blog-7iw.pages.dev"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

解释：这段代码的意思是，允许“你的本地开发环境”和“你的正式博客域名”，去请求 R2 里的资源。

WinSCP ​

它是 IT 行业极其老牌、免费且开源的系统级文件传输客户端。虽然界面偏传统，但绝不是 Cyberduck 那种拟物化老旧风格，而是极其高效的“左边本地电脑，右边云端服务器”的双面板视图。

安装WinSCP ​

获取软件：WinSCP官网

执行安装：

安装到d盘，然后扩展包勾选第一个和最后一个

image-20260330185703811

然后勾选中间两个内容即可

image-20260330185845610

用户界面选择默认第一个

image-20260330185909712

使用WinSCP ​

配置链接：

按照以下步骤配置，即可直接挂载你的 Cloudflare R2 - Videos：

image-20260330190541214

1. 文件协议 (File Protocol)

  • 点击下拉菜单，将默认的 SFTP 更改为 Amazon S3。
  • （选择完毕后，右侧的“端口号”会自动变成 443，保持原样即可）。

2. 主机名 (Host name)

  • 填入你在 Cloudflare R2 后台获取的 S3 API 链接。
  • 核心排雷：必须删除链接开头的 https://。
  • 最终填入的格式应完全类似于：04b8ef5661effd677306c77efebdee00.r2.cloudflarestorage.com。

3. 用户名 (User name)

  • 填入 Cloudflare 提供的 Access Key ID (访问密钥 ID)。在 S3 协议规范中，Access Key 对应这里的用户名。
  • 访问密钥ID与机密访问密钥详见：[点击这里](# 生成S3密钥)

4. 密码 (Password)

  • 填入 Cloudflare 提供的 Secret Access Key (机密访问密钥)。

5. 保存配置（关键步骤）

  • 不要直接点登录，先点击下方左侧的 “保存(S)...” 按钮。

  • 在弹出的对话框中，将站点名称命名为 Cloudflare R2 - Videos。

  • 勾选“保存密码”（前提是这是你的私人电脑），然后点击“确定”。这样你以后打开 WinSCP 就可以一键秒连，无需再找密钥。

  • 还有，在高级设置处选择一个桶

    image-20260330194000778

6. 执行连接

  • 点击右下角的 “登录” 按钮。

如果有错误，将URL样式改为“路径”

image-20260330193202376

预期结果： 登录成功后，WinSCP 会呈现经典的左右分屏界面。左侧是你电脑的本地硬盘，右侧会直接列出你 Cloudflare 账号下所有的存储桶（my-blog-videos 和 my-blog-files 都会以黄色文件夹的形式并排显示）

image-20260330194207920

视频压缩 ​

解决了对象存储R2的问题，也解决了本地链接云端WinSCP的障碍，要做的其实就是把拍摄的高质量高码率视频在本地压缩成一个轻量版本视频进行上传观看

详见：

基于 VitePress 搭建 | 记录生活与代码

Copyright © 2025-present PandaC

PandaC