由于个人使用习惯，市面上的开源图床都不满足我的需求，于是手搓了一个图床，后端直接扔zeabur上。

数据库用的PostgreSQL，同样白嫖Neon每个月3G的免费数据库。

后端占用极低，对于zeabur每个月白嫖5美金免费额度来说。根本用不完，如果你嫌Neon太慢，数据库也可以直接部署在zeabur上。

后端仓库：https://github.com/baiduxc/image-hosting-server

前端仓库：https://github.com/baiduxc/image-hosting-system

前端#

一个基于 Vue 3 + Node.js 的现代化图床管理系统，支持多云存储、图片转存、权限管理等功能。

✨ 功能特性#

🖼️ 图片管理#

本地上传 - 支持拖拽上传、批量上传
网络转存 - 智能识别并转存网络图片，绕过防盗链
图片预览 - 高清预览、缩放、下载
批量操作 - 批量删除、批量下载
智能分类 - 按日期自动分类存储

☁️ 多云存储#

腾讯云 COS - 完整支持，包含自定义域名
阿里云 OSS - 完整支持，包含自定义域名
Amazon S3 - 兼容 AWS S3 协议
MinIO - 私有化部署存储
七牛云 - 支持七牛云存储
又拍云 - 支持又拍云存储

🔐 权限管理#

用户认证 - JWT Token 认证机制
角色权限 - 管理员/普通用户权限分级
路由守卫 - 页面访问权限控制
API 鉴权 - 接口级别权限验证

📊 数据统计#

存储统计 - 实时存储空间使用情况
上传统计 - 上传数量、大小统计
用户统计 - 用户活跃度分析

⚙️ 系统配置#

存储配置 - 多存储服务配置管理
系统设置 - 网站标题、Logo、描述配置
安全设置 - 注册开关、权限控制

🛠️ 技术栈#

前端技术#

Vue 3 - 渐进式 JavaScript 框架
TypeScript - 类型安全的 JavaScript
Vite - 下一代前端构建工具
TDesign Vue Next - 企业级设计语言和组件库
Vue Router - 官方路由管理器
Pinia - 状态管理库
Axios - HTTP 客户端
Tailwind CSS - 实用优先的 CSS 框架

后端技术#

Node.js - JavaScript 运行时
Express.js - Web 应用框架
PostgreSQL - 关系型数据库 (Neon)
JWT - JSON Web Token 认证
Multer - 文件上传中间件
Sharp - 图片处理库

存储服务#

腾讯云 COS - 对象存储服务
阿里云 OSS - 对象存储服务
Amazon S3 - 云存储服务
MinIO - 开源对象存储
七牛云 - 云存储服务
又拍云 - 云存储服务

📦 项目结构#

1
image-hosting-system/
2
├── public/                 # 静态资源
3
├── src/                   # 源代码
4
│   ├── assets/           # 静态资源
5
│   ├── components/       # 公共组件
6
│   │   ├── Layout.vue   # 主布局组件
7
│   │   └── ...
8
│   ├── composables/      # 组合式函数
9
│   │   ├── useAuth.ts   # 认证相关
10
│   │   ├── useSystemConfig.ts # 系统配置
11
│   │   └── ...
12
│   ├── router/           # 路由配置
13
│   │   └── index.ts
14
│   ├── services/         # API 服务
15
│   │   └── api.ts
16
│   ├── views/            # 页面组件
17
│   │   ├── Login.vue    # 登录页面
18
│   │   ├── Upload.vue   # 上传页面
19
│   │   ├── Manage.vue   # 图片管理
20
│   │   ├── Stats.vue    # 数据统计
21
│   │   ├── Settings.vue # 系统设置
22
│   │   └── Profile.vue  # 个人中心
23
│   ├── App.vue          # 根组件
24
│   └── main.ts          # 入口文件
25
├── package.json         # 项目配置
26
├── vite.config.ts       # Vite 配置
27
├── tailwind.config.js   # Tailwind 配置
28
└── tsconfig.json        # TypeScript 配置

🚀 快速开始#

环境要求#

Node.js >= 16.0.0
npm >= 8.0.0 或 yarn >= 1.22.0
PostgreSQL 数据库

安装依赖#

1
# 安装前端依赖
2
npm install
3

4
# 安装后端依赖
5
cd server
6
npm install

环境配置#

复制环境配置文件：

1
# 前端环境配置
2
cp .env.example .env

配置环境变量：

前端 .env

1
VITE_API_BASE_URL=http://localhost:3001/api

后端#

专业的图片存储和管理系统后端服务，支持多云存储、用户管理、权限控制等功能。

🚀 功能特性#

核心功能#

多云存储支持 - 腾讯云COS、阿里云OSS、七牛云、又拍云、Amazon S3、MinIO
用户管理系统 - 注册、登录、权限控制、个人资料管理
图片管理 - 上传、转存、删除、批量操作、搜索筛选
统计分析 - 上传统计、存储使用量、流量分析
系统配置 - 动态配置管理、存储配置、安全设置

技术特性#

RESTful API - 标准化的API接口设计
JWT认证 - 安全的用户认证机制
数据库连接池 - 高效的PostgreSQL连接管理
文件处理 - 支持多种图片格式，自动压缩优化
CORS支持 - 完整的跨域资源共享配置
错误处理 - 完善的错误处理和日志记录

📋 系统要求#

Node.js >= 18.0.0
PostgreSQL >= 14.0
内存 >= 512MB
存储空间 >= 1GB

🛠️ 安装部署#

1. 克隆项目#

1
git clone <repository-url>
2
cd image-hosting-system/server

2. 安装依赖#

1
npm install

3. 环境配置#

复制并配置环境变量：

1
cp .env.example .env

编辑 .env 文件：

1
# 服务器配置
2
PORT=3001
3
NODE_ENV=production
4

5
# 数据库配置 - Neon PostgreSQL
6
DATABASE_URL=postgresql://username:password@host:port/database?sslmode=require
7

8
# JWT密钥 (请生成一个安全的随机字符串)
9
JWT_SECRET=your_jwt_secret_key_here

4. 数据库初始化#

启动服务器时会自动初始化数据库表结构和默认数据：

1
npm start

5. 默认管理员账户#

系统会自动创建默认管理员账户：

用户名: admin
密码: admin123
邮箱: admin@example.com

⚠️ 安全提醒: 首次登录后请立即修改默认密码！

部署#

fork后端项目到自己的仓库，直接用zeabur绑定仓库导入，设置环境变量，数据库路径和数据库链接是否开启SSL，一键部署。绑定域名接口访问（cloudflare的域名把小橙云关掉）。

前端同样的操作发布到cloudflare pages，设置环境变量后端地址即可。