用途
该技能用于在 Next.js 应用中实现安全、高效的文件上传功能，覆盖从基础文件处理到云存储集成的完整场景，适合需要构建头像上传、文件管理、图片优化等功能的开发者参考。
主要能力
文件上传基础
提供 HTML 文件输入与拖拽上传（Drag and Drop）两种交互方式的实现示例，包含文件选择、上传状态管理与错误处理。
Supabase Storage
- 上传文件到指定 bucket，自动生成唯一文件名并获取公开 URL。
- 支持上传进度跟踪（onUploadProgress）。
- 通过 RLS 策略实现私有文件：用户只能上传/读取自己目录下的文件，并使用 createSignedUrl 生成带有效期的签名 URL。
图片优化
- 客户端压缩：使用 browser-image-compression，可设置 maxSizeMB、maxWidthOrHeight、useWebWorker。
- 服务端处理：使用 Sharp 进行 resize、格式转换（如 JPEG quality 85）。
- 缩略图生成：通过 Sharp 的 resize + cover 生成多尺寸图片（如 300、800）。
Cloudinary 集成
- 配置 cloud_name、api_key、api_secret。
- 使用 upload_stream 上传，支持 folder 与 resource_type。
- 通过 getCldImageUrl 生成带变换参数的图片 URL（宽高、裁剪、人脸重力、webp、自动质量）。
AWS S3 集成
- 使用 @aws-sdk/client-s3 与 @aws-sdk/s3-request-presigner。
- 服务端上传（PutObjectCommand）与预签名 URL 直传（客户端直接 PUT 到 S3）。
文件校验
- 客户端校验：允许类型白名单（如 image/jpeg、image/png、image/webp）与最大体积（如 5MB）。
- 服务端校验：通过魔数字节判断真实文件类型（JPEG 0xff 0xd8、PNG 0x89 0x50），比扩展名更安全。
多文件与分片上传
- 多文件：使用 Promise.all 并发上传。
- 大文件分片：按 1MB 分块，携带 uploadId、chunkIndex、totalChunks，最后调用 finalize 完成。
文件管理
基于 Supabase Storage 提供列表（list，支持 limit/offset/sortBy）、删除（remove）、移动/重命名（move）操作。
使用方式
该技能以代码示例形式给出，需在 Next.js 项目中按需引入对应依赖（如 browser-image-compression、sharp、cloudinary、@aws-sdk/client-s3 等），并配置相应环境变量（如 CLOUDINARY_CLOUD_NAME、AWS_REGION、AWS_BUCKET_NAME 等）。具体安装命令与代码片段见技能正文。
适用场景
- 实现文件上传功能
- 集成云存储（Supabase/S3/Cloudinary）
- 优化图片上传
- 创建头像上传系统
- 构建文件管理功能
- 实现拖拽上传
- 处理大文件上传
- 生成缩略图
- 调试上传问题
- 设置文件校验
限制
资料未提供该技能的具体收费、价格、平台支持范围或效果数据，暂未提供相关信息。