# Storage

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

- Skill: `lightpointventures/storage` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lightpointventures/storage`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lightpointventures/storage/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lightpointventures (https://skillmd.com/u/lightpointventures)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lightpointventures/storage

---


# 添加文件上传

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

## 步骤

### 1. 了解需求

**问题 1：上传什么文件**
> 用户需要上传什么？
> - 图片（头像、产品图）
> - 文档（PDF、Word）
> - 通用文件
> 这决定了需要的文件验证和处理逻辑。

**问题 2：存储方案**
> 文件存在哪里？
> - 本地存储（最简单，适合开发和小项目）
> - Cloudflare R2（便宜，兼容 S3 API，推荐生产用）
> - AWS S3（成熟稳定，企业首选）
> - Supabase Storage（如果已经用 Supabase）
> 不确定就先用本地存储，后面再换。

### 2. 生成上传功能

**后端：**
- 上传接口 — 接收文件，验证类型和大小
- 文件验证 — 限制文件类型（白名单）、大小上限
- 存储逻辑 — 保存到选定的存储位置
- 文件 URL — 返回可访问的文件地址

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

**安全措施：**
- 文件名随机化，防止路径穿越
- 文件类型服务端二次验证
- 设置合理的大小上限

### 3. 测试

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

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