# vue-upload-util

**Repository Path**: CodingGorit/vue-upload-util

## Basic Information

- **Project Name**: vue-upload-util
- **Description**: 基于 vue 开发的文件上传工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-11
- **Last Updated**: 2025-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# Vue 图片上传工具

基于 **Vue 3 + TypeScript + Vite** 构建的现代化图片上传与管理工具。

## ✨ 功能特性

### 📤 文件上传
- 🖱️ **拖拽上传**：将图片拖拽到指定区域即可上传
- 📁 **点击上传**：点击上传区域或按钮选择文件
- ✅ **文件验证**：支持 JPG、PNG、GIF、WEBP 格式，最大 10MB
- ⚡ **多文件上传**：一次选择多个文件批量上传
- 🔄 **实时预览**：上传后立即显示缩略图

### 🖼️ 图片预览（新功能！）
- 🎯 **全屏预览**：点击眼睛图标在当前页面预览图片
- 🔍 **缩放功能**：支持 10% - 500% 缩放，鼠标滚轮操作
- 🔄 **旋转功能**：左右旋转，每次 90°
- ⌨️ **键盘快捷键**：
  - `ESC` 关闭预览
  - `←/→` 切换图片
  - `Shift + ←/→` 旋转
  - `Shift + +/-` 缩放
  - `R` 重置
- 📱 **响应式设计**：完美适配移动端

### 📋 文件管理
- ✅ **分页显示**：大文件列表自动分页，每页 8 个文件
- ✅ **多种选择模式**：
  - 单击：单选
  - Ctrl/Cmd + 单击：多选（保留现有选择）
  - Shift + 单击：范围选择（选中一段）
- 🎛️ **工具栏功能**：全选、取消选择、反向选择
- 🗑️ **批量删除**：删除选中的文件
- 📊 **文件信息**：显示文件名、大小、类型
- 🔢 **实时统计**：显示文件数量、选中数量、当前分页

### 📖 分页管理
- 🔢 **页码导航**：首页、上一页、下一页、末页
- ⚡ **快速跳转**：输入页码直接跳转
- 📊 **详细信息**：显示"第 X / Y 页，共 Z 条"
- 🎯 **智能显示**：自动省略中间页码，支持自定义显示数量
- 📱 **移动适配**：响应式分页导航

### 🎨 用户体验
- 💅 **现代 UI**：基于 Bootstrap 5 的精美界面
- 🎭 **平滑动画**：所有交互都有流畅的过渡效果
- 🚨 **错误提示**：友好的错误信息提示
- 📱 **移动优先**：响应式设计，完美支持移动设备

## 🔥 应用展示

![Vue 图片上传工具 - 应用界面](./src/assets/app-screenshot.png)

## 🚀 快速开始

### 安装依赖
```bash
pnpm install
```

### 开发模式
```bash
pnpm dev
```
访问 http://localhost:5173

### 构建生产版本
```bash
pnpm build
```

### 预览生产构建
```bash
pnpm preview
```

## 📁 项目结构

```
src/
├── App.vue              # 主应用组件
├── main.ts              # 应用入口
├── pages/
│   └── MyFiles.vue      # 文件管理页面
├── components/
│   ├── Navbar.vue       # 导航栏
│   ├── ActionsBar.vue   # 操作栏
│   ├── ImagePreview.vue # 图片预览组件（新）
│   └── Pagination.vue   # 分页组件（新）
├── composables/         # 可复用逻辑（新）
│   ├── usePagination.ts # 分页管理 hooks
│   └── useFileSelection.ts # 文件选择管理 hooks
└── assets/              # 静态资源
```

## 🛠️ 技术栈

- **框架**: Vue 3.5.12（Composition API + `<script setup>`）
- **语言**: TypeScript 5.6.2
- **构建工具**: Vite 5.4.10
- **UI 库**: Bootstrap Icons 1.11.3
- **包管理器**: pnpm
- **架构**: Composables 可复用逻辑模式

## 📖 详细文档

- [分页与多选功能指南](./docs/PAGINATION_AND_SELECTION.md)
- [Composables 完整指南](./docs/COMPOSABLES_GUIDE.md)
- [Pagination 组件指南](./docs/PAGINATION_GUIDE.md)
- [图片预览功能使用指南](./docs/IMAGE_PREVIEW_GUIDE.md)
- [GitHub Copilot 项目指引](./.github/copilot-instructions.md)

## 🎯 使用方法

### 1. 上传图片
- 拖拽图片到上传区域
- 或点击"上传"按钮选择文件
- 支持批量上传多个图片

### 2. 文件选择
- **单选**：单击文件行
- **多选**：Ctrl/Cmd + 单击
- **范围选择**：Shift + 单击
- **全选/取消/反选**：使用工具栏按钮

### 3. 文件浏览
- 每页显示 8 个文件
- 使用分页导航或快速跳转
- 快速跳转后按 Enter 或点击跳转按钮

### 4. 预览图片
- 点击眼睛图标 👁️ 打开预览
- 使用工具栏：放大、缩小、旋转、重置
- 鼠标滚轮缩放图片
- 箭头按钮切换多张图片

### 5. 管理文件
- 选中要删除的文件
- 点击"删除"按钮批量删除
- 或直接点击单个文件的删除按钮

## ⌨️ 快捷键

### 列表操作
| 操作 | 效果 |
|------|------|
| 单击 | 单选文件 |
| Ctrl + 单击 | 多选/取消选择 |
| Shift + 单击 | 范围选择 |

### 预览操作
| 快捷键 | 功能 |
|--------|------|
| `ESC` | 关闭预览 |
| `←` | 上一张图片 |
| `→` | 下一张图片 |
| `Shift + ←` | 左旋转 |
| `Shift + →` | 右旋转 |
| `Shift + +` | 放大 |
| `Shift + -` | 缩小 |
| `R` | 重置 |
| 鼠标滚轮 | 缩放 |

## 🔜 未来规划

- [ ] 图片拖拽平移
- [ ] 双击缩放
- [ ] 触摸手势支持
- [ ] 云端上传
- [ ] 图片编辑功能
- [ ] 搜索和过滤
- [ ] 虚拟滚动
- [ ] 图片懒加载

## 📄 License

MIT

---

**参考教程**: [网易云课堂 Vue 3 课程](https://study.163.com/course/courseLearn.htm?courseId=1210808824)