# 图片存储解决方案

## 🚨 当前问题

项目目前使用 **IndexedDB** 存储图片，这存在以下问题：

### 1. **本地存储限制**
- IndexedDB 是浏览器本地存储
- 数据只存在用户的浏览器中
- 无法跨设备访问
- 清除浏览器数据会丢失所有图片

### 2. **无法共享**
- 其他用户看不到上传的图片
- 协作者无法访问
- 不适合多用户系统

### 3. **存储容量限制**
- 浏览器对 IndexedDB 有容量限制
- 大量图片会占用用户设备空间
- 可能导致性能问题

## ✅ 推荐解决方案

### 方案一：云存储服务（推荐）

使用专业的云存储服务，如：

#### 国内服务
- **阿里云 OSS**
- **腾讯云 COS**
- **七牛云**
- **又拍云**

#### 国际服务
- **AWS S3**
- **Google Cloud Storage**
- **Azure Blob Storage**
- **Cloudflare R2**

#### 实现步骤

1. **注册云存储服务**
2. **创建存储桶（Bucket）**
3. **获取 API 密钥**
4. **创建上传 API**

```typescript
// app/api/upload/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { getServerSession } from 'next-auth'
import { authOptions } from '@/lib/auth'
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const s3Client = new S3Client({
  region: process.env.AWS_REGION!,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
})

export async function POST(req: NextRequest) {
  const session = await getServerSession(authOptions)
  if (!session?.user?.id) {
    return NextResponse.json({ error: '未授权' }, { status: 401 })
  }

  const formData = await req.formData()
  const file = formData.get('file') as File
  
  if (!file) {
    return NextResponse.json({ error: '没有文件' }, { status: 400 })
  }

  // 生成唯一文件名
  const fileName = `avatars/${Date.now()}-${file.name}`
  
  // 上传到 S3
  const buffer = Buffer.from(await file.arrayBuffer())
  await s3Client.send(new PutObjectCommand({
    Bucket: process.env.AWS_BUCKET_NAME!,
    Key: fileName,
    Body: buffer,
    ContentType: file.type,
  }))

  // 返回 URL
  const url = `https://${process.env.AWS_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${fileName}`
  
  return NextResponse.json({ url })
}
```

5. **前端调用**

```typescript
const handleAvatarUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const file = event.target.files?.[0]
  if (!file) return

  try {
    setIsUploadingAvatar(true)
    
    // 上传到云存储
    const formData = new FormData()
    formData.append('file', file)
    
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    })
    
    const { url } = await response.json()
    
    // 更新成员头像 URL
    await updateMember(member.id, {
      avatarUrl: url,
    })
    
    setAvatarBlobUrl(url)
  } catch (error) {
    console.error('上传头像失败:', error)
  } finally {
    setIsUploadingAvatar(false)
  }
}
```

### 方案二：服务器文件系统

将图片存储在服务器的文件系统中。

#### 优点
- 不需要额外的云服务
- 成本较低

#### 缺点
- 需要管理服务器存储空间
- 扩展性较差
- 需要处理备份

#### 实现步骤

```typescript
// app/api/upload/route.ts
import { writeFile } from 'fs/promises'
import { join } from 'path'

export async function POST(req: NextRequest) {
  const formData = await req.formData()
  const file = formData.get('file') as File
  
  const bytes = await file.arrayBuffer()
  const buffer = Buffer.from(bytes)
  
  // 保存到 public/uploads 目录
  const fileName = `${Date.now()}-${file.name}`
  const path = join(process.cwd(), 'public', 'uploads', fileName)
  await writeFile(path, buffer)
  
  // 返回相对 URL
  const url = `/uploads/${fileName}`
  return NextResponse.json({ url })
}
```

### 方案三：Base64 编码（不推荐）

将图片转换为 Base64 字符串存储在数据库中。

#### 缺点
- 数据库体积急剧增大
- 查询性能下降
- 不适合大图片
- 传输效率低

**不推荐用于生产环境！**

## 📊 方案对比

| 方案 | 成本 | 性能 | 可靠性 | 扩展性 | 推荐度 |
|------|------|------|--------|--------|--------|
| 云存储 | 中 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 服务器文件系统 | 低 | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| IndexedDB | 无 | ⭐⭐ | ⭐ | ⭐ | ⭐ |
| Base64 | 无 | ⭐ | ⭐⭐ | ⭐ | ❌ |

## 🔧 迁移步骤

### 1. 选择云存储服务
推荐：阿里云 OSS（国内）或 AWS S3（国际）

### 2. 配置环境变量

```env
# .env.local
AWS_REGION=ap-southeast-1
AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key
AWS_BUCKET_NAME=your_bucket_name
```

### 3. 安装依赖

```bash
npm install @aws-sdk/client-s3
# 或
npm install ali-oss  # 阿里云
```

### 4. 创建上传 API
参考上面的代码示例

### 5. 修改前端代码
- 移除 IndexedDB 相关代码
- 改为调用上传 API
- 使用返回的 URL

### 6. 数据迁移
- 将现有的 IndexedDB 图片迁移到云存储
- 更新数据库中的 URL

## 💡 最佳实践

### 1. 图片压缩
上传前压缩图片以节省存储和带宽：

```typescript
import imageCompression from 'browser-image-compression'

const compressedFile = await imageCompression(file, {
  maxSizeMB: 1,
  maxWidthOrHeight: 1920,
})
```

### 2. 图片格式
- 头像：建议 JPEG/WebP，尺寸 500x500
- 照片墙：建议 JPEG/WebP，尺寸 1920x1080

### 3. CDN 加速
使用 CDN 加速图片访问：
- 阿里云 OSS + CDN
- AWS S3 + CloudFront
- Cloudflare R2（自带 CDN）

### 4. 安全性
- 使用签名 URL 控制访问
- 设置合理的 CORS 策略
- 限制上传文件大小和类型

### 5. 成本优化
- 定期清理未使用的图片
- 使用生命周期策略自动归档
- 选择合适的存储类型

## 📝 当前状态

- ✅ 头像上传功能已实现（使用 IndexedDB）
- ⚠️ 需要迁移到云存储
- 📋 照片墙功能也使用 IndexedDB
- 📋 需要统一迁移所有图片存储

## 🎯 下一步

1. 选择云存储服务
2. 创建上传 API
3. 修改前端上传逻辑
4. 迁移现有数据
5. 测试验证
6. 部署上线