# filebrowser-nodejs

**Repository Path**: syd8/filebrowser-nodejs

## Basic Information

- **Project Name**: filebrowser-nodejs
- **Description**: nodejs+vue的文件管理器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-09
- **Last Updated**: 2026-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FileBrowser - 文件浏览器

## 项目简介

FileBrowser是一个基于Midway.js和Vue 3开发的现代化文件浏览器，提供了丰富的文件管理功能，包括文件上传、下载、编辑、预览、复制、剪切、粘贴等，支持文件夹上传和多文件操作。

## 视频介绍

视频介绍 [https://abc66.top/h5/#/pages/index/art?id=ai-file](https://)

## 技术栈

### 后端

- **Midway.js v3** - 基于Koa的企业级Node.js框架
- **TypeScript** - 类型安全的JavaScript超集
- **@midwayjs/busboy** - 文件上传处理
- **dotenv** - 环境变量管理

### 前端

- **Vue 3** - 渐进式JavaScript框架
- **Element Plus** - 基于Vue 3的UI组件库
- **Ace Editor** - 代码编辑器
- **HTML5/CSS3** - 前端基础技术

## 功能特性

### 文件管理

- ✅ 文件夹和文件列表展示
- ✅ 新建文件夹和文件
- ✅ 文件和文件夹上传
- ✅ 支持拖拽上传
- ✅ 支持文件夹上传
- ✅ 文件和文件夹下载
- ✅ 文件和文件夹删除
- ✅ 文件和文件夹重命名
- ✅ 文件详情查看

### 文件操作

- ✅ 复制文件/文件夹
- ✅ 剪切文件/文件夹
- ✅ 粘贴文件/文件夹
- ✅ 全选功能
- ✅ 多选模式

### 文件预览和编辑

- ✅ 图片预览
- ✅ 音频播放
- ✅ 视频播放
- ✅ 代码编辑器（支持≤2MB文件）
- ✅ 支持多种编程语言

### 其他功能

- ✅ 路径导航
- ✅ 右键菜单
- ✅ 中文路径支持
- ✅ 响应式设计

## 安装和运行

### 环境要求

- Node.js ≥ 12.0.0
- npm ≥ 6.0.0

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 生产构建

```bash
npm run build
```

### 启动服务器

```bash
npm start
```

服务器将在 http://127.0.0.1:7003/ 上运行

## 项目结构

```
filebrowser-midway/
├── src/
│   ├── config/            # 配置文件
│   │   ├── config.default.ts   # 默认配置
│   │   └── env.config.ts       # 环境变量配置
│   ├── controller/        # 控制器
│   │   └── file.controller.ts  # 文件操作控制器
│   ├── service/           # 服务层
│   │   └── file.service.ts     # 文件操作服务
│   └── interface.ts       # 类型定义
├── public/                # 静态资源
│   ├── assets/            # 前端资源
│   │   ├── css/           # CSS文件
│   │   └── js/            # JavaScript文件
│   │       ├── ace/       # Ace编辑器
│   │       └── ...
│   ├── home.html          # 主页面
│   └── index.html         # 登录页面
├── config.env             # 环境配置文件
├── package.json           # 项目配置
├── tsconfig.json          # TypeScript配置
└── README.md              # 项目说明
```

## 配置说明

项目使用 `config.env` 文件进行配置管理，主要配置项如下：


| 配置项    | 说明           | 默认值                                                 |
| ----------- | ---------------- | -------------------------------------------------------- |
| FILES_DIR | 文件存储根目录 | d:/wwwroot/filebrowser-nodejs/filebrowser-midway/files |
| PORT      | Koa服务器端口  | 7003                                                   |

## API接口

### 文件操作


| 方法   | 路径                 | 描述                       |
| -------- | ---------------------- | ---------------------------- |
| GET    | /api/files           | 获取文件列表               |
| POST   | /api/directory       | 创建目录                   |
| POST   | /api/file            | 创建文件                   |
| GET    | /api/file            | 读取文件内容               |
| PUT    | /api/file            | 写入文件内容               |
| DELETE | /api/file            | 删除文件或目录             |
| PUT    | /api/rename          | 重命名文件或目录           |
| POST   | /api/copy            | 复制文件或目录             |
| POST   | /api/move            | 移动文件或目录             |
| GET    | /api/file-content    | 获取文件二进制内容         |
| POST   | /api/upload-multiple | 上传文件（支持单个和多个） |

## 使用说明

### 基本操作

1. **登录**：访问 http://127.0.0.1:7003/index.html
2. **浏览文件**：点击文件夹进入，使用面包屑导航返回
3. **上传文件**：点击"上传文件"按钮或拖拽文件到指定区域
4. **上传文件夹**：点击"上传文件夹"按钮，选择要上传的文件夹
5. **新建文件夹**：点击左侧菜单"新建文件夹"
6. **新建文件**：点击左侧菜单"新建文件"

### 编辑文件

1. 双击文件（≤2MB）
2. 在编辑器中修改内容
3. 点击"保存"按钮保存修改

### 预览文件

1. 双击图片、音频或视频文件
2. 在弹出的预览窗口中查看或播放

### 复制/剪切/粘贴

1. 进入多选模式
2. 选择要操作的文件/文件夹
3. 点击"复制"或"剪切"按钮
4. 导航到目标目录
5. 点击"粘贴"按钮

## 开发说明

### 代码风格

- TypeScript遵循Midway.js推荐风格
- Vue代码遵循Vue 3最佳实践
- 命名规范：
  - 类名：PascalCase
  - 方法名：camelCase
  - 变量名：camelCase
  - 常量名：UPPER_SNAKE_CASE

### 环境变量

- 开发环境：使用 `config.env` 文件
- 生产环境：建议使用系统环境变量

### 日志

- 控制台输出开发日志
- 错误信息包含堆栈跟踪

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request！

## 作者

- 项目维护：[ABC东]
- 邮箱：[253828149@qq.com]

## 更新日志

### v1.0.0 (2026-01-10)

- ✅ 初始版本发布
- ✅ 实现基本文件管理功能
- ✅ 支持文件上传和下载
- ✅ 支持文件编辑和预览
- ✅ 实现复制、剪切、粘贴功能
- ✅ 支持右键菜单
- ✅ 实现环境变量配置

---

**FileBrowser** - 让文件管理更简单！ 📁✨