1. Project Overview

A lightweight and fast image management and image hosting system developed with Koa2 + Vue3.x + Vite3.x + typescript

Programmers write blogs as part of their daily routine. Of course, writing blog posts often involves inserting images, so an image hosting service is commonly used to manage image resources. PicGo is one of the most popular image hosting tools on the market. It is a desktop application developed with electron-vue, which means it needs to be downloaded, installed, and configured whenever it is needed, making the process rather inconvenient. To address this issue, we developed this lightweight image management system. It is a front-end and back-end separated image hosting system built with vue3.x + typescript + vite + koa + mysql, eliminating the need to repeatedly configure image hosting services. The frontend is developed with Vue3.x + Vite3.x + typescript + Element-plus, while the backend uses Koa2 + typescript + mysql. Jwt + koa-ts-controllers are used for login authentication and permission verification.

2. Open Source License

Licensed under MIT

3. Screenshots

Preview

Login

Registration

Forgot Password

Upload Area

Image Management

Storage Bucket Management

Album Management

Operation log

Personal Center

Usage Preferences

Data statistics

User Management

Storage Bucket Source Management

Dictionary Management

System Settings

Changelog

4. Feature Overview

Quick Image Hosting: An online image hosting system built with the Koa + Vue3.x + TypeScript ecosystem. It supports online storage bucket plugin development and currently supports Tencent Cloud COS, Upyun, Alibaba Cloud OSS, GitHub image hosting, Gitee image hosting, local storage buckets, Qiniu Cloud KODO, and other online image hosting storage services. PicGo is currently one of the most popular image hosting systems on the market. However, since PicGo is a desktop application, switching to a new computer requires downloading, installing, and configuring it all over again, which is quite inconvenient. This system was created to solve that problem.

Built-in functions

Image Upload

Supports multiple image uploads, drag-and-drop uploads, paste uploads, and one-click copying of external image links in multiple formats.

Image Management

Manage uploaded images with support for file renaming, moving images into designated albums, deleting images, previewing images, and more.

Storage Bucket Management

Supports multiple storage buckets, allowing you to add and manage multiple object storage buckets simultaneously without any upper limit. Examples include Qiniu Cloud Object Storage, Alibaba Cloud Object Storage, and Tencent Cloud Object Storage. The system automatically tracks the number of images and storage space used in each bucket. You can also control whether a storage bucket is displayed in the upload area.

Album Management

Supports album management, allowing images to be grouped and categorized for easier organization. Images can also be uploaded directly to albums.

Operation Log Management

Provides comprehensive visualized logging that records all user operations for easy event tracing. Regular users can only view their own operation records, while administrators can view records from all users. The contribution chart in the statistics section also obtains its data from these operation records.

Personal Information Management

Users can manage their personal information, including avatars (the system provides four built-in avatar groups with different styles to choose from), nicknames, occupations, gender, personal profiles, and login passwords.

Data statistics

The system provides data statistics, tracking the number of images, storage buckets, total storage space occupied, albums, and each user's contribution to the system.

Usage Preferences

Since users have different usage habits, the system provides a usage preferences center where users can configure the default image link format to copy, custom link formats, frequently used keyboard shortcuts, and whether to enable upload success notifications and link copying success notifications.

User Management

Multi-user management. Different roles can manage different data, and users can register independently or be created directly by administrators through the management page.

Storage Bucket Source Management

Storage bucket management allows administrators to manage configurations for storage bucket sources. For example, when configuring Qiniu Cloud Object Storage, administrators can define which fields users need to fill in, which fields are required, and which fields should provide intelligent suggestions. In other words, this feature configures the metadata supported by each storage bucket. It also provides enable and disable options. For example, if an object storage service is no longer available on the market, the administrator can disable it so users cannot create storage buckets of that type.

Dictionary Management

Manage frequently used, relatively fixed data in the system, such as occupations and user genders in the personal center, as well as the different icons displayed for different storage bucket types on the storage bucket page.

System Settings

Manage commonly used system data, including the system name, system logo, ICP filing information, changelog, and the sources of icons used throughout the system.

Permission Control

Comprehensive permission control. Different roles can be assigned different operation permissions to control access to corresponding deletion and viewing operations.

5. Tech Stack

Environments

• Node version >= 14.17.6
• Mysql version >= 5.7
• typescript version >= 4.8.4

Installation

Installation Steps

1. Install Node Visit the official Node websitenode.exeand install it, or usenrmto install it.

2. Install Git Visit the official Git websitegitand install it. This step is optional.

3. Install typescript, nodemon, and ts-node Use the following command to install them globallytypescript

npm install typescript -g
npm install nodemon -g
npm install ts-node -g

4. Clone the Code Use thegit clonecommand to clone the code to your local machine, or download the compressed package directly and extract it locally

5. Install Dependencies

# Install frontend dependencies
cd client
npm install

# Install server dependencies
cd server
npm install

6. Start the Project

# Start the frontend project
cd client
npm run dev

# Start the server
cd server
npm run start

The project has started successfully when the console displays the output shown below.

7. Build and Deploy the Project The Koa project does not need to be built before deployment. Simply copy all contents from theserverdirectory to your server, then perform the installation steps described above.

# Build and deploy the frontend project
cd client
npm run build

Copydistall contents from the generated directory to your web server.