Storage

当用户想加文件上传、上传图片、上传文档、配置云存储时使用 — 添加文件上传和存储功能

lightpointventures 1aa4fe3 1.5 KB Updated

File contents

添加文件上传

帮用户为项目添加文件上传和存储功能。

步骤

1. 了解需求

问题 1:上传什么文件

用户需要上传什么?

  • 图片(头像、产品图)
  • 文档(PDF、Word)
  • 通用文件 这决定了需要的文件验证和处理逻辑。

问题 2:存储方案

文件存在哪里?

  • 本地存储(最简单,适合开发和小项目)
  • Cloudflare R2(便宜,兼容 S3 API,推荐生产用)
  • AWS S3(成熟稳定,企业首选)
  • Supabase Storage(如果已经用 Supabase) 不确定就先用本地存储,后面再换。

2. 生成上传功能

后端:

  • 上传接口 — 接收文件,验证类型和大小
  • 文件验证 — 限制文件类型(白名单)、大小上限
  • 存储逻辑 — 保存到选定的存储位置
  • 文件 URL — 返回可访问的文件地址

前端:

  • 上传组件 — 拖拽上传 + 点击选择
  • 上传进度 — 进度条显示
  • 预览 — 图片类文件支持上传前预览
  • 错误提示 — 文件太大、格式不对等

安全措施:

  • 文件名随机化,防止路径穿越
  • 文件类型服务端二次验证
  • 设置合理的大小上限

3. 测试

上传一个测试文件,确认可以上传、预览和下载。

文件上传功能已添加。 如果需要图片裁剪或压缩,告诉我。

lightpointventures/claude-code-starter/tree/main/skills/storage commit 1aa4fe3692

Frequently asked questions

npx skillmds@latest add lightpointventures/storage