【已开源】Cursor AI 开发实战：小文件在线互传工具

灵机一动 + Cursor + 几个小时 = 一个完整的文件传输工具！这就是 AI 编程的魅力~

前言

大家好！今天给大家分享一次纯纯的 AI 开发实战。

周末在家闲着没事，突然想到平时工作中经常需要在设备间传文件，或者临时给朋友分享个东西。现有的工具要么太重（百度网盘、微信那种），要么不够安全（公开链接谁都能访问），要么就是要付费。

灵机一动：能不能做一个轻量级的临时文件传输工具？

然后打开 Cursor，开始和 AI 聊天，几个小时后 ，一个完整的项目就出来了 ------ F2F.icu！

关键是，整个项目完全基于 Cloudflare 这个赛博大善人 提供的免费服务，完美的穷鬼开发者套餐：不需要买服务器、不需要装数据库、不需要担心流量费用，还自带全球 CDN 加速！

在线体验 ：f2f.icu

工具截图

核心特性

先说说这个工具有啥亮点：

1. 极简的使用体验

整个使用流程超级简单：

发送方：生成一个 6 位分享码 → 上传文件/文本 → 把码给对方
接收方：输入 6 位取件码 → 一键下载

就像快递取件一样，6 个字符搞定一切。不用注册登录，不用装 APP，打开网页就能用。

2. 自动销毁机制

这个是我最喜欢的设计。数据的生命周期是这样的：

上传后如果 1 小时没人下载 → 自动删除
下载后 1 分钟 → 自动删除

为什么下载后不立即删除？因为考虑到网络不稳定的情况，给用户一个「重新下载」的缓冲时间。这样既保护了隐私，又提供了容错机制。

3. 完全免费 + 零维护

这是重点！整个项目完全基于 Cloudflare 的免费服务：

Cloudflare Pages：托管前端（全球 CDN 加速）
Cloudflare Workers：处理 API 请求（边缘计算）
Cloudflare KV：存储文件数据（自动 TTL 过期删除）

免费额度对个人使用来说完全够用：

KV 读取：每天 10 万次
KV 写入：每天 1000 次
Workers 请求：每天 10 万次

而且因为用了 KV 的原生 TTL 特性，数据过期自动清理，完全零维护成本。

Cloudflare ------ 赛博大善人的穷鬼开发套餐

这里必须吹一波 Cloudflare。

作为一个穷鬼开发者（bushi），Cloudflare 简直是业界良心：

Cloudflare Pages：免费托管静态网站 + 全球 CDN
Cloudflare Workers：免费 Serverless 函数（每天 10 万次请求）
Cloudflare KV：免费键值存储（每天 10 万次读取）
免费 SSL 证书：自动配置 HTTPS
免费 DDoS 防护：自带安全防护

这套组合拳下来，对于个人项目和小型应用来说，完全够用而且完全免费！

不需要绑信用卡（划重点），注册个账号就能用。这你受得了吗？

所以我这个项目从头到尾的成本只有个几块钱的域名费用。

技术架构

下面聊聊技术实现，这也是我和 AI 一起讨论出来的方案。

为什么选 KV 而不是 R2？

很多人可能会问，Cloudflare 不是有对象存储 R2 吗，为啥不用？

这里我做了个对比：

特性	KV 存储	R2 对象存储
单文件大小限制	25MB	5GB
TTL 支持	✅ 原生支持	❌ 需要手动实现定时清理
读写延迟	极低（边缘节点）	稍高（区域存储）
免费使用	✅ 直接用	❌ 需要绑定信用卡

对于临时文件传输这个场景，KV 简直是完美选择：

原生 TTL：上传时直接设置过期时间，到期自动删除，不用写定时任务
25MB 够用：日常传个文档、图片、小视频完全够
零成本启动：不需要绑卡，注册就能用

数据流转过程

整个数据流是这样的：

复制代码

发送方上传
  → 文件转 Base64 编码
  → 存入 KV（TTL: 1小时）
  → 返回分享码

接收方下载
  → 验证分享码
  → 从 KV 读取数据
  → 更新 TTL 为 1 分钟
  → 返回文件/文本

核心代码其实很简单，以上传为例（简化版）：

typescript 复制代码

// functions/api/upload.ts
export async function onRequestPost({ request, env }) {
  const formData = await request.formData();
  const code = formData.get("code"); // 6位分享码
  const content = formData.get("content"); // Base64 内容

  // 存入 KV，设置 1 小时过期
  await env.TRANSFERS.put(
    code,
    JSON.stringify({
      type: "file",
      content: content,
      fileName: fileName,
      downloaded: false,
    }),
    {
      expirationTtl: 3600, // 1小时 = 3600秒
    }
  );

  return new Response(JSON.stringify({ success: true }));
}

下载时：

typescript 复制代码

// functions/api/download.ts
export async function onRequestGet({ request, env }) {
  const code = new URL(request.url).searchParams.get("code");

  const data = await env.TRANSFERS.get(code);

  // 标记为已下载，更新 TTL 为 1 分钟
  await env.TRANSFERS.put(
    code,
    JSON.stringify({
      ...data,
      downloaded: true,
    }),
    {
      expirationTtl: 60, // 1分钟后自动删除
    }
  );

  return new Response(JSON.stringify(data));
}

是不是很简洁？KV 的 API 非常易用，而且支持直接设置过期时间，省去了很多额外的清理逻辑。

前端设计

前端我用了 Tailwind CSS + 原生 JavaScript，没有引入 Vue/React 这些框架，原因是：

体积小：整个前端打包后不到 100KB
加载快：静态 HTML，秒开
够用了：功能不复杂，用不着框架

界面设计上追求极简：

两个 Tab（发送/接收）
三种内容类型（文件/文本/图片）
一键操作（生成码 → 上传 → 分享）

支持拖拽上传、粘贴截图（Ctrl/Cmd + V），这些交互细节让使用体验更好。

安全性考虑

关于安全，有几点要说明：

分享码的强度

6 位字符（A-Z, 0-9）= 36^6 = 21.8 亿种组合

理论上暴力破解的成功率是很低的，而且：

数据会自动过期（最多 1 小时）
分享码只能使用一次（下载后 1 分钟删除）

所以安全性对于临时文件传输场景是够用的。

使用建议

虽然有一定安全性，但我还是建议：

⚠️ 不要传输高度敏感信息（密码、私钥、身份证号等）

这个工具的定位是轻量级临时文件传输，适合：

发送工作文档
分享照片/截图
传输代码文件
分享文本片段

部署超简单

说到部署，真的是简单到爆。完全不需要自己的服务器，只需要一个 Cloudflare 账号（免费）：

Fork + 一键部署

Fork 我的 GitHub 仓库

github.com/isnl/f2f
连接到 Cloudflare Pages
- 登录 Cloudflare Dashboard
- Workers & Pages → 创建应用 → 连接 Git
- 选择你 Fork 的仓库
- 构建配置：输出目录填 public
创建 KV 存储
- 在 KV 板块创建一个命名空间（比如 f2f-transfers）
- 在 Pages 项目设置中绑定这个 KV（变量名：TRANSFERS）
完成！

Cloudflare 会给你一个域名，直接访问就能用。如果有自己的域名，还可以绑定自定义域名。

整个过程 5 分钟搞定，而且之后不需要任何维护，Cloudflare 自动帮你处理全球分发、HTTPS 证书、数据清理等等。

一些有趣的优化

1. 6 位分享码的设计

为什么是 6 位？因为：

4 位太短（只有 160 万组合，容易碰撞）
8 位太长（用户记忆和输入成本高）
6 位刚刚好（21 亿组合 + 便于记忆）

而且只用大写字母和数字（不用小写），避免了 O 和 0、I 和 1 的混淆。

2. 图片的特殊处理

对于图片类型，接收方可以直接在页面上预览，而不是强制下载。这样分享截图特别方便，对方打开链接就能看到。

3. 响应式设计

全面适配手机、平板、电脑，在手机上的体验也很流畅。经常我在外面用手机传个文件给自己电脑，特别方便。

4. 国际化支持

已经内置了中英双语支持（i18n），根据浏览器语言自动切换，代码里也准备了中英文文档。虽然功能简单，但该有的细节都有。

AI 编程的一些感悟

1. AI 是放大器，不是替代品

AI 让我的开发效率提升了至少 3-5 倍，但核心的：

需求设计（要做什么）
技术选型（用什么方案）
问题发现（哪里不对劲）
体验优化（怎么做更好）

这些还是需要我自己来决策。AI 是个超强的执行助手，但产品思维和技术判断还得靠人。

2. 会提问很重要

和 AI 对话式编程，最重要的是会提问：

❌ "帮我写个上传功能"（太笼统）
✅ "写一个文件上传 API，接收 FormData，验证文件大小不超过 25MB，转 Base64 存到 KV，设置 TTL 为 3600 秒"（清晰明确）

问题越具体，AI 给的答案越准确。

3. 快速迭代才是王道

有了 AI，我可以快速试错：

想到一个功能 → 让 AI 实现 → 测试 → 不满意就换方案
整个过程可能只要几分钟

这种快速迭代的能力，在以前是不敢想象的。

4. 专注于创意和产品

因为 AI 帮我搞定了大量的"体力活"（写基础代码、调样式、配环境），我可以把更多精力放在：

产品体验的打磨
功能细节的优化
用户场景的思考

这才是真正有价值的部分。

总结

关于 AI 编程开发

AI 真的改变了个人开发者的游戏规则。

以前做一个完整的项目，可能需要几天甚至几周。现在有了 Cursor 这样的 AI 编程工具，一个周末下午就能从想法到上线。

但关键是，你得知道自己要什么，然后引导 AI 去实现。AI 是工具，是助手，不是魔法棒。

关于 Cloudflare

赛博大善人，名不虚传。

作为穷鬼开发者，Cloudflare 的免费服务让我们不需要购买服务器、不需要关心运维、不需要担心流量费用，就能做出一个全球可用、性能优秀的 Web 应用。

而且因为是边缘计算，用户访问时会自动路由到离他最近的节点，无论在国内还是国外，速度都很快。

给想尝试的你

如果你也想体验 AI 编程开发，或者对 Cloudflare 的边缘计算感兴趣：

装个 Cursor（或者其他 AI 编程工具）
注册个 Cloudflare 账号（免费的）
想个有意思的小项目（解决自己的实际需求）
开始和 AI 聊天写代码

你会发现，做一个自己的产品，真的没那么难了。

这个项目的代码很简洁，总共也就几百行，非常适合学习和二次开发。如果你想自己部署一套，或者想看看是怎么实现的，欢迎去 GitHub 看看。

项目地址 ：github.com/isnl/f2f

在线体验 ：f2f.icu

如果觉得有用，欢迎 Star ⭐️ 支持一下！

有任何问题或建议，也欢迎在 GitHub 上提 Issue，我会及时回复的~

技术栈总结：

🤖 开发工具：Cursor（AI 辅助编程）
🎨 前端：原生 JavaScript + Tailwind CSS
⚡️ 后端：Cloudflare Workers（Serverless）
💾 存储：Cloudflare KV（键值存储）
🌐 托管：Cloudflare Pages（全球 CDN）
🌍 国际化：内置中英双语支持
💰 成本：完全免费 🎉
⏱️ 开发时间：不到 4 小时

希望这篇文章对你有帮助！如果你也用 AI 做了有趣的项目，欢迎在评论区分享~

哦对了，最近从 Cursor 又平滑迁移到 Claude Code 了，给大家分享一个正在使用的 Claude Code 中转站，非公益站！

因为他家有付费用户，所以稳定性相当不错，体验非常丝滑！而且模型能力就我重度 AI 使用体验而言，无降智！无降智！无降智！(用过 Cursor/AugmentCode/Trae/Windsurf/Github Copilot/国产 glm、kimi、minimax 等等)

注册即可赠送 30 刀额度，正常使用 claude-4.5-sonnet，可以用很久

api.codemirror.codes/register?af...