对象存储与文件管理

export const appConfig = {
  storage: {
    provider: "s3",  // S3 兼容协议
    bucketNames: {
      avatars: process.env.NEXT_PUBLIC_AVATARS_BUCKET_NAME || "avatars",
    },
  },
} as const;

STORAGE_REGION=your_region # 例如 us-east-1
STORAGE_ACCESS_KEY_ID=your_access_key_id
STORAGE_SECRET_ACCESS_KEY=your_secret_access_key

# 存储桶名称（可选，可在应用配置中配置）
NEXT_PUBLIC_AVATARS_BUCKET_NAME=your-bucket-name

STORAGE_REGION=auto
STORAGE_ACCESS_KEY_ID=your_access_key_id
STORAGE_SECRET_ACCESS_KEY=your_secret_access_key
STORAGE_ENDPOINT=https://your-account-id.r2.cloudflarestorage.com

# 存储桶名称（可选，可在应用配置中配置）
NEXT_PUBLIC_AVATARS_BUCKET_NAME=your-bucket-name

export const getSignedUploadUrl = actionClient
  .inputSchema(z.object({
    bucket: z.string().min(1),
    key: z.string().min(1),
    contentType: z.string().min(1),
  }))
  .outputSchema(z.string())
  .action(async ({ parsedInput: { bucket, key, contentType } }) => {
    const storageProvider = getStorageProvider();
    return await storageProvider.getSignedUploadUrl({
      bucket,
      key,
      contentType,
    });
  });

"use client";

import { getSignedUploadUrl } from "@/storage/actions";
import { appConfig } from "@/config";
import { useState } from "react";

export default function AvatarUpload() {
  const [uploading, setUploading] = useState(false);

  const handleFileUpload = async (file: File) => {
    setUploading(true);
    try {
      // 1. 生成唯一的文件名
      const fileExtension = file.name.split('.').pop();
      const fileName = `user-${Date.now()}.${fileExtension}`;

      // 2. 获取预签名上传 URL
      const signedUrl = await getSignedUploadUrl({
        bucket: appConfig.storage.bucketNames.avatars,
        key: fileName,
        contentType: file.type,
      });

      // 3. 直接上传到存储服务
      const uploadResponse = await fetch(signedUrl, {
        method: "PUT",
        body: file,
        headers: {
          "Content-Type": file.type,
        },
      });

      if (uploadResponse.ok) {
        console.log("文件上传成功！", fileName);
        // 4. 更新用户信息或界面
        await updateUserAvatar(fileName);
      }
    } catch (error) {
      console.error("上传失败:", error);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="space-y-4">
      <input
        type="file"
        accept="image/*"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) handleFileUpload(file);
        }}
        disabled={uploading}
        className="file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0"
      />
      {uploading && <p>上传中...</p>}
    </div>
  );
}

export const GET = async (
  _req: Request,
  { params }: { params: Promise<{ path: string[] }> }
) => {
  const { path } = await params;
  const [bucket, filePath] = path;

  // 验证存储桶权限
  if (bucket === appConfig.storage.bucketNames.avatars) {
    // 生成访问 URL
    const signedUrl = await getStorageProvider().getSignedUrl({
      bucket,
      key: filePath,
      expiresIn: 60 * 60, // 1 小时
    });

    // 重定向到签名 URL，添加缓存头
    return NextResponse.redirect(signedUrl, {
      headers: { "Cache-Control": "max-age=3600" },
    });
  }

  return new Response("Not found", { status: 404 });
};

import Image from "next/image";

export default function UserAvatar({ fileName }: { fileName: string }) {
  // 通过 Image Proxy 访问图片
  const imageUrl = `/image-proxy/${appConfig.storage.bucketNames.avatars}/${fileName}`;

  return (
    <Image
      src={imageUrl}
      alt="用户头像"
      width={64}
      height={64}
      className="rounded-full"
    />
  );
}

export interface StorageProvider {
  // 获取文件访问 URL
  getSignedUrl(params: SignedUrlParams): Promise<string>;
  
  // 获取文件上传 URL
  getSignedUploadUrl(params: SignedUploadUrlParams): Promise<string>;
}

export interface SignedUrlParams {
  bucket: string;
  key: string;
  expiresIn: number;
}

export interface SignedUploadUrlParams {
  bucket: string;
  key: string;
  contentType: string;
}

"use client";

import { getSignedUploadUrl } from "@/storage/actions";
import { appConfig } from "@/config";
import { authClient } from "@/lib/auth/client";
import { useState } from "react";
import Image from "next/image";

export default function AvatarManager({ currentAvatar }: {
  currentAvatar?: string;
}) {
  const [uploading, setUploading] = useState(false);
  const [avatarKey, setAvatarKey] = useState(currentAvatar);

  const handleAvatarUpload = async (file: File) => {
    if (file.size > 5 * 1024 * 1024) { // 5MB 限制
      alert("文件大小不能超过 5MB");
      return;
    }

    setUploading(true);
    try {
      // 生成文件名：user-{timestamp}.{extension}
      const fileExtension = file.name.split('.').pop();
      const fileName = `user-${Date.now()}.${fileExtension}`;

      // 获取上传 URL
      const result = await getSignedUploadUrl({
        bucket: appConfig.storage.bucketNames.avatars,
        key: fileName,
        contentType: file.type,
      });

      // 上传文件
      const uploadResponse = await fetch(result, {
        method: "PUT",
        body: file,
        headers: { "Content-Type": file.type },
      });

      if (!uploadResponse.ok) {
        throw new Error("Upload failed");
      }

      // 更新用户资料
      const { error } = await authClient.updateUser({
        image: fileName,
      });

      if (error) {
        throw new Error(error.message);
      }

      setAvatarKey(fileName);
      alert("头像更新成功！");
    } catch (error) {
      console.error("上传失败:", error);
      alert("上传失败，请重试");
    } finally {
      setUploading(false);
    }
  };

  const avatarUrl = avatarKey 
    ? `/image-proxy/${appConfig.storage.bucketNames.avatars}/${avatarKey}`
    : "/default-avatar.png";

  return (
    <div className="flex items-center space-x-4">
      <Image
        src={avatarUrl}
        alt="用户头像"
        width={64}
        height={64}
        className="rounded-full border-2 border-gray-300"
      />
      
      <div>
        <input
          type="file"
          accept="image/*"
          onChange={(e) => {
            const file = e.target.files?.[0];
            if (file) handleAvatarUpload(file);
          }}
          disabled={uploading}
          className="hidden"
          id="avatar-upload"
        />
        
        <label
          htmlFor="avatar-upload"
          className="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 disabled:opacity-50"
        >
          {uploading ? "上传中..." : "更换头像"}
        </label>
      </div>
    </div>
  );
}

export default function DocumentUpload() {
  const handleDocumentUpload = async (file: File) => {
    // 支持的文档类型
    const allowedTypes = ['application/pdf', 'application/msword', 'text/plain'];
    if (!allowedTypes.includes(file.type)) {
      alert("只支持 PDF、Word 和文本文件");
      return;
    }

    const fileName = `documents/${Date.now()}-${file.name}`;
    
    const signedUrl = await getSignedUploadUrl({
      bucket: "documents", // 假设有文档存储桶
      key: fileName,
      contentType: file.type,
    });

    await fetch(signedUrl, {
      method: "PUT",
      body: file,
      headers: { "Content-Type": file.type },
    });

    // 保存文档记录到数据库
    await saveDocumentRecord({
      fileName,
      originalName: file.name,
      size: file.size,
      type: file.type,
    });
  };

  return (
    <div className="border-2 border-dashed border-gray-300 rounded-lg p-6">
      <input
        type="file"
        accept=".pdf,.doc,.docx,.txt"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) handleDocumentUpload(file);
        }}
        className="w-full"
      />
      <p className="text-sm text-gray-500 mt-2">
        支持 PDF、Word、文本文件，最大 10MB
      </p>
    </div>
  );
}