🚀 腾讯云COS批量上传器

一个功能完整、设计精美的腾讯云COS批量文件上传系统,支持拖拽上传、进度监控和高级功能。

部署

更多模板: EdgeOne Pages

✨ 功能特性

📁 文件上传

• ✅ 拖拽上传 - 支持拖拽文件到页面进行上传
• ✅ 点击选择 - 传统的文件选择方式
• ✅ 批量处理 - 一次选择多个文件进行批量上传
• ✅ 文件预览 - 显示图片缩略图和视频封面
• ✅ 文件信息 - 显示文件格式、大小等详细信息

📊 进度监控

• ✅ 实时进度条 - 显示每个文件的上传进度
• ✅ 上传状态 - 等待、上传中、成功、失败状态指示
• ✅ 进度叠加层 - 上传时在文件预览上显示半透明进度层
• ✅ 错误处理 - 上传失败时显示错误信息和重试选项

⚙️ 高级配置

• ✅ 并发控制 - 可配置同时上传的文件数量
• ✅ 文件选择 - 勾选/取消勾选要上传的文件

📋 存储桶管理

• ✅ 存储桶 - 查看已上传文件列表
• ✅ 文件详情 - 点击查看文件详细信息

🎨 用户界面

• ✅ 现代设计 - 简洁美观的用户界面
• ✅ 响应式布局 - 适配不同屏幕尺寸
• ✅ 状态反馈 - 丰富的视觉反馈和交互效果

🚀 快速开始

1. 配置腾讯云COS

使用前请先配置您的腾讯云COS设置:

# 复制环境变量模板
cp .env.example .env.local

# 编辑配置文件
nano .env.local

填入您的腾讯云COS配置:

COS_SECRET_ID=your-secret-id
COS_SECRET_KEY=your-secret-key
COS_BUCKET=your-bucket-name-appid
COS_REGION=your-bucket-region

2. 腾讯云COS设置

创建COS存储桶

1. 登录腾讯云控制台
2. 创建新的COS存储桶
3. 配置CORS策略:

[
  {
    "allowedOrigin": ["*"],
    "allowedMethod": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "allowedHeader": ["*"],
    "exposeHeader": ["ETag", "Content-Length"],
    "maxAgeSeconds": 3600
  }
]

创建访问密钥

1. 进入访问管理 > API密钥管理
2. 创建新的密钥对(SecretId和SecretKey)
3. 配置存储桶访问权限策略:

{
  "version": "2.0",
  "statement": [
    {
      "effect": "allow",
      "action": [
        "name/cos:GetObject",
        "name/cos:PutObject",
        "name/cos:DeleteObject",
        "name/cos:GetBucket"
      ],
      "resource": [
        "qcs::cos:ap-guangzhou:uid/your-appid:your-bucket-name-appid/*"
      ]
    }
  ]
}

🔧 开发

安装node.js 18.x

项目使用Next.js 14.x 开发， 所以支持的Node.js最小版本为18.x

安装依赖

npm install

启动开发服务器

npm run dev
# 或使用启动脚本
./start.sh

构建生产版本

npm run build
npm start

项目当前运行在: http://localhost:3004

代码检查

npm run lint

📖 使用指南

上传文件

1. 访问 http://localhost:3004
2. 选择"上传"页面(默认)
3. 拖拽文件到上传区域或点击选择文件
4. 配置上传选项
5. 勾选要上传的文件
6. 点击"开始上传"

查看存储桶

1. 点击左侧"存储桶"菜单
2. 浏览已上传的文件
3. 点击文件查看详细信息

高级功能

• 批量操作: 可以同时上传多个文件

🛠️ 技术架构

前端技术栈

• Next.js 14 - React全栈框架
• TypeScript - 类型安全
• Tailwind CSS - 样式框架
• Lucide React - 图标库

后端集成

• 腾讯云COS JS SDK - COS客户端
• 预签名URL - 安全的文件上传

核心功能

• 自定义Hooks - 文件上传逻辑封装
• 状态管理 - React useState/useEffect
• 错误处理 - 完善的异常处理机制

📁 项目结构

cos-batch-uploader/
├── app/                    # Next.js App Router
│   ├── api/               # API路由
│   │   ├── upload-batch/  # 批量上传API
│   │   ├── cos-files/     # COS文件管理API
│   │   └── storage-usage/ # 存储用量API
│   ├── components/        # React组件
│   │   ├── FileUpload/    # 文件上传组件
│   │   ├── Navigation/    # 导航组件
│   │   └── ui/           # 通用UI组件
│   ├── hooks/            # 自定义Hooks
│   │   ├── useFileUpload.ts
│   │   └── useCOSFiles.ts
│   ├── lib/              # 工具库
│   │   └── cos-client.ts  # COS客户端配置
│   ├── types/            # TypeScript类型定义
│   ├── upload/           # 上传页面
│   ├── history/          # 历史记录页面
│   └── globals.css       # 全局样式
├── public/               # 静态资源
├── .env.example          # 环境变量模板
├── .env.local           # 本地环境变量(需配置)
├── package.json         # 项目依赖
├── tailwind.config.js   # Tailwind配置
├── start.sh            # 启动脚本
└── README.md           # 项目文档

📚 参考文档

• 腾讯云COS文档
• COS JavaScript SDK
• Next.js文档
• Tailwind CSS文档