【轻快图片管理系统】- 开源图床系统

已于 2023-07-11 10:17:15 修改
阅读量1.8k 收藏 11
点赞数 4
分类专栏： 开源项目 文章标签： 图床 开源 vue3 在线图床系统 在线图床管理系统
于 2023-02-09 09:49:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36765367/article/details/128947518
版权
基于Koa2 + Vue3.x + Vite3.x + typescript开发的轻量级快捷图片管理系统、图床系统

简介

程序员日常就是写博客，当然写博客时就会涉及到在博文中插入图片，所以往往会使用图床来进行图片资源管理，市面上较流行的图床是PicGo，是使用electron-vue开发的桌面应用程序，所以每次需要下载安装并配置图床，比较麻烦。所以开发了这款轻快图片管理系统，是基于vue3.x + typescript + vite + koa + mysql开发的前后端分离图床系统，使用该系统可以不需要每次都配置图床。
前端使用 Vue3.x + Vite3.x + typescript + Element-plus, 后端使用 Koa2 + typescript + mysql 进行开发，使用 Jwt + koa-ts-controllers 做登录验证和权限校验。

内置功能

图片上传

支持图片多图上传、拖拽上传、粘贴上传、一键复制多种格式的图片外链。

图片管理

多上传的图片进行管理，支持文件重命名、移入指定相册、删除图片、预览图片等。

存储桶管理

支持多桶储存，可同时添加多个对象存储桶管理，上不封顶，例如：七牛云对象存储、阿里云对象存储、腾讯云对象存储等等，系统会统计出每个存储桶下的图片数量以及已使用存储量。同时也支持控制存储桶是否显示在上传区。

相册管理

支持相册管理，可以对图片进行分组分类管理，便于用户将不同的图片进行分类挂办理，同时也支持直接将图片上传到相册中。

操作日志管理

完整的可视化日志功能，记录用户所有操作，方便事件溯源。普通用户只能查看自己的操作记录，管理员则能查看所有人员的操作记录，于此同时数据统计中的贡献图的数据来源也是从操作记录中提取。

个人信息维护

用户可以对自己的信息管理，如头像(系统内置4组不同维度的头像供选择)、昵称、职业、性别、个人简介以及个人登录密码进行维护管理。

数据统计

系统提供了数据统计功能，统计用户的图片数量、存储桶数量、总占用存储量、相册数量以及系统贡献度数据进行统计。

使用习惯配置

考虑到每个用户的使用习惯不同，系统提供了使用习惯配置中心，可以对默认复制的图片链接格式、自定义链接格式、常用快捷键配置以及是否开启上传成功提示、复制链接成功提示等配置。

用户管理

多用户管理，根据不同的角色可以管理不同的数据，同时用户可以通过自主注册或者管理员在管理页面直接创建。

存储桶源管理

存储桶管理是用于管理员对存储桶源的相关配置进行管理，例如七牛云对象存储，需要用户在界面上感知出需要填写哪些数据、哪些数据时必填项、有哪些数据的智能提示，其实就是对存储桶拥有哪些元数据进行配置，于此同时还提供了是否启用或者禁用的功能，比如某一个对象存储已经从市面上out，则管理员可以进行禁用操作，这样用户就不能创建该类型的存储桶。

字典管理

对系统中经常使用的一些较为固定的数据进行维护，例如个人中心的职业、用户性别、存储桶页面不同的存储桶展示不同的图标等数据维护。

系统设置

对系统中一些常用的数据进行维护，包括系统名称、系统logo、备案信息、更新日志、系统上所使用的的图标的来源进行配置。

权限控制

完整的权限控制功能，不同的角色可分配不同的操作权限，控制对应的删除及查看。

在线体验

在线演示
地址：http://picture.itchenliang.club/#/

账号：guest@163.com

密码：000000

环境

  • Node版本 >= 14.17.6
  • Mysql版本 >= 5.7
  • typescript版本 >= 4.8.4

安装

安装步骤

1. 安装node
前往node官网下载node.exe并安装或者使用nrm进行安装。

2. 安装git
前往Git官网下载git并安装，此步可忽略。

3. 安装typescript、nodemon、ts-node
使用下面的命令全局安装typescript

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

4. 克隆代码
使用git clone命令将代码克隆到本地，或者直接下载压缩包到本地并解压

5. 依赖安装

# 前端依赖安装
cd client
npm install

# 服务端依赖安装
cd server
npm install

6. 项目启动

# 前端项目启动
cd client
npm run dev

# 服务端启动
cd server
npm run start

控制台出现如下如所示即代表启动成功
202211101711526.png

202211101712519.png

7. 项目打包部署
koa项目可以不用打包部署，直接将server目录下的内容所有内容拷贝到服务器上然后执行上述的安装步骤。

# 前端项目打包部署
cd client
npm run build

将打包后生成的dist目录下的所有内容拷贝到web服务器上。

预览

登录

202211101727165.png

注册

2022111017274810.png

忘记密码

202211101728063.png

上传区

202211101718307.png

图片管理

202211101719274.png

存储桶管理

202211101719413.png

相册管理

202211101720094.png

操作日志

202211101720309.png

个人中心

202211101721163.png
202211101721385.png

使用习惯配置

202211101723388.png

数据统计

202211101724094.png

用户管理

202211101724463.png

存储桶源管理

202211101725136.png

字典管理

202211101725334.png

系统设置

2022111017260710.png

更新日志

202211101726356.png

联系我

Email: itchenliang@163.com

捐赠/打赏

如果您认可我的作品，并且觉得对你有所帮助我愿意接受来自各方面的捐赠。

支付宝微信
八哥声动视界
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Gallery(图片管理系统) 3.0.9
04-30
Gallery是一个PHP开源图片管理系统，可以让您管理照片，采用PHP语言写成。通过Gallery你可以轻松的创造和保存相册的照片。图片管理包括建立自动缩略图，图形缩放，旋转，排序，添加注释和发送电子贺卡，搜索等，可以对相册进行读，写，并说明隐私级别，管理员可以批量添加已经上传到FTP服务器上的图片。 Gallery 3.0.9 修复了 3.0.8 中的一个小的安全漏洞，建议尽快升级。 默认是英文，安装好后，后台可以在线升级为包括简繁中文在内的多种语言。
✍Halo轻快简洁功能强大使用Java开发的博客系统
08-07
Halo，作为一个轻快、简洁且功能强大的博客系统，是Java开发者们的理想选择。它的设计理念是提供一个易于使用、高效且可扩展的平台，让作者们能够专注于创作，而非繁琐的技术细节。这个系统的核心优势在于其Java技术...
推荐开源项目：Rikka - 极简图床系统
gitblog_00026的博客
06-09 406
推荐开源项目：Rikka - 极简图床系统 项目地址:https://gitcode.com/7sDream/rikka 1、项目介绍 Rikka是一个精心设计的个人图床系统，采用Go语言编写，并提供了方便的Docker镜像。它的核心特点是简洁高效，旨在简化图片上传、分享的过程，让图片管理变得轻松愉快。不仅有Web应用界面，还配备了RESTful API接口和命令行工具，以适应不同的使用场景。 2...
推荐开源项目：ImageStore - 图片库管理系统
gitblog_00075的博客
06-06 436
推荐开源项目：ImageStore - 图片库管理系统 项目地址:https://gitcode.com/hovel/imagestore 项目介绍 ImageStore 是一个专为Django项目设计的图像画廊系统，提供了一站式的图片管理解决方案。它不仅适合于网站后台的图片管理和展示，而且也支持用户创建个人的图库功能。通过集成PrettifyPhoto和Django CMS，ImageStore...
【轻快图片管理系统】- 安装部署教程
qq_36765367的博客
03-04 1085
为了便于大家在线体验，本系统提供了演示地址，可以通过下面的演示地址和账号进行登录体验系统功能。如果你觉得项目不错，还望动动你的手指给点点star，让更多人看到优秀的项目！！！
【搭建私人图床】使用LightPicture开源搭建图片管理系统并远程访问
睿的博客
05-31 1044
现在的手机越来越先进，功能也越来越多，而手机的摄像功能也愈发强大，所拍摄的照片越来越清晰，但也让数码照片的体积暴涨。对于像笔者这样经常拍照的人来说，手机容量经常告警，因此笔者将家里的电脑改造成能随时上传下载和访问的图片服务器。今天，笔者就为大家展示，如何使用Cpolar内网穿透与Lightpicture组合，将个人电脑改造成能随时上传、下载或访问，并能生成外链的图床服务器。图床作为现代网站必不可或缺的辅助网站，对于自建网站的意义不言而喻。
【轻快图片管理系统】-系统预览截图
qq_36765367的博客
03-05 919
为了便于大家在线体验，本系统提供了演示地址，可以通过下面的演示地址和账号进行登录体验系统功能。如果你觉得项目不错，还望动动你的手指给点点star，让更多人看到优秀的项目！！！
【轻快图片管理系统】- 系统概述与内置功能介绍
qq_36765367的博客
03-04 979
轻快图片管理系统顾名思义是一个做图片管理的系统，和现在市面上很火的Picgo类似，但是由于Picgo是本地版的，即需要自己安装桌面端应用后才能使用，每次换一台电脑都需要重新安装一次，然后再安装指定的图床插件并配置插件，十分麻烦。为了解决上面问题的问题，故诞生了这个轻快图片管理系统，这个是一个在线版的BS系统，只需要安装部署一次后就可以反复使用，只需要你使用浏览器访问安装部署地址即可，如果你不想安装部署也可以直接在演示环境上操作。轻快图片管理系统可以看做是集成多种第三方对象存储于一身的系统。
宝塔面板安装部署LightPicture轻量级图片管理系统
攻城狮晨哲的博客
06-15 2129
LightPicture是使用thinkphp+vue开发的一套轻量级企业团队图片资源管理系统、图床系统
【轻快图片管理系统】- 新老版本差异
qq_36765367的博客
03-05 752
为了便于大家在线体验，本系统提供了演示地址，可以通过下面的演示地址和账号进行登录体验系统功能。
nginx 二十分钟入门
Neo_Echo的博客
05-26 667
nginx 十分钟入门 文章目录nginx 十分钟入门Nginx 是什么？Nginx 应运而生？Nginx 能做什么？正向代理反向代理HTTP服务器邮件代理服务器图片存储更多有意思的事情Nginx 的特点是什么？Nginx 凭什么做到高并发？Nginx 凭什么做到热部署？nginx 如何实现的高可用？nginx 怎么体现小的？nginx 使用安装 Nginxnginx 配置实例来两个实验nginx虚拟主机nginx反向代理nginx负载均衡nginx实现SSL证书+rewrite Nginx 是什么？ Ng
matlab终止以下代码-brisk:轻快
05-21
关于"系统开源"的标签，它可能意味着BRISK库或者相关的MATLAB代码是开放源代码的，允许用户查看、修改和分发代码。开源软件通常促进技术交流和创新，开发者可以从源代码中学习实现细节，也可以根据自己的需求进行...
Nebula IRC-开源
05-01
**Nebula IRC 开源项目详解** Nebula IRC 是一款专为主题和字体定制而设计的Svelte框架构建的应用程序，它作为一个轻量级、高效且高度便携的IRC（Internet Relay Chat）客户端，旨在提供优秀的用户体验。IRC是一种...
Automated Music Composition-开源
05-09
这意味着，无论是轻快的舞曲还是深情的慢歌，系统都能自动生成符合风格的伴奏，使得音乐创作更具个性化和艺术性。 在开源软件的背景下，"Automated Music Composition"项目为开发者和音乐创作者提供了一个开放的...
mailslash - slashdot.jp checker-开源
07-06
这是一个小的 Perl 脚本，用于检查 http://slashdot.jp/ 中的新文章。 它从 slashdot.rdf 或 comments.pl 中挑选新文章，并通过电子邮件发布它们。 轻快:-)
Codes 重新定义 SaaS 模式的研发项目管理平台开源版 4.5.6 发布
MYPM_AndyLiu的专栏
07-24 1114
Codes 是一个 高效、简洁、轻量的一站式研发项目管理平台。包含需求管理，任务管理，测试管理，缺陷管理，自动化测试，cicd 等功能；Codes 帮助企业加速融合研发、测试、运维一体化进程。
开源消息队列比较
最新发布
AngelCryToo的专栏
07-24 941
Apache Kafka、RabbitMQ、Apache ActiveMQ、Redis (with Redis Streams) 、NATS、Apache Pulsar、ZeroMQ、Apache RocketMQ、NSQ、Kafka Streams等消息队列漫谈
立创梁山派--移植开源的SFUD和FATFS实现SPI-FLASH文件系统
m0_63472758的博客
07-23 495
对于fatfs的介绍，野火的教程中都有详细的介绍，这里就不再赘述了。其实它的移植是比较简单的，只需要修改diskio.c文件中的相关接口函数和ffconf.h配置文件。如果对你有所帮助的话，请给我点一个star，嘿嘿。对需要修改的函数进行说明。然后就可以开始进行测试啦。
vite+antv 后台管理系统
07-14
### 回答1： Vite 是一种快速、简单且灵活的 JavaScript 构建工具。它具有出色的性能和开发体验，适用于各种前端项目。而 AntV 是一套基于数据可视化的前端开发框架，提供了丰富的数据图表、地理地图以及图形布局等组件和工具。 由于 Vite 和 AntV 的优秀特点，开发团队结合两者的优势，开发了 Vite AntV 后台管理系统。该系统旨在提供一个高效、易用和美观的后台管理平台，满足用户对数据可视化和数据处理的需求。 Vite AntV 后台管理系统具有以下特点和优势： 首先，该系统采用了 Vite 的构建工具，使得开发过程更加快速高效。Vite 提供了基于浏览器原生模块系统的开发方式，能够快速启动开发服务器，并且具备模块热重载的能力，大大提升了开发效率。 其次，AntV 的数据可视化组件为 Vite AntV 后台管理系统提供了强大的可视化能力。用户可以根据自己的需求选择合适的图表、地图等组件，将复杂的数据通过直观的图形展示出来，更好地理解和分析数据。 此外，Vite AntV 后台管理系统内置了丰富的数据处理和管理功能，包括数据导入、数据处理、数据分析等。用户可以使用系统提供的工具对数据进行清洗、转换、计算等操作，以及基于数据做出决策和优化。 最后，Vite AntV 后台管理系统的界面设计也非常美观和用户友好。开发团队根据现代化的设计风格，精心设计了清晰、简洁的界面，使用户能够轻松上手并且享受良好的使用体验。 综上所述，Vite AntV 后台管理系统是一款基于 Vite 构建工具和 AntV 数据可视化组件的高效、易用和美观的后台管理平台，旨在满足用户对数据可视化和数据处理的需求。无论是数据分析师、管理者还是开发者，都可以通过该系统方便地进行数据操作、分析和展示。 ### 回答2： vite antv 后台管理系统是一个基于vite和ant-design-vue开发的现代化后台管理系统。它提供了丰富的组件和功能，用于构建高质量的管理平台。 首先，vite antv 后台管理系统采用了vite作为前端构建工具，具有性能优势和开发效率高的特点。它能够快速进行模块热更新，提供了更快的开发启动速度和打包速度，加快了开发者的开发效率。 其次，vite antv 后台管理系统借用了ant-design-vue作为UI组件库，提供了一系列美观、易用的组件，例如表格、表单、图表和导航等。这些组件能够帮助开发者快速构建出符合设计规范的后台管理界面。 此外，vite antv 后台管理系统还提供了丰富的功能和插件。例如，它支持路由配置、权限控制、国际化、数据可视化和数据请求等功能。开发者可以根据需求选择和配置这些功能，以满足具体的后台管理需求。 总之，vite antv 后台管理系统是一个现代化的、高效的后台管理系统，具有优秀的性能表现和丰富的功能。它能够帮助开发者快速搭建出漂亮、易用的后台管理界面，并能够满足复杂的业务需求。 ### 回答3： vite antv是一款基于前端开发工具vite和数据可视化框架antv的后台管理系统。通过使用vite antv，开发人员可以快速搭建一个功能完善、界面美观的后台管理系统。 vite是一个轻快的前端开发工具，具有快速打包、冷启动等优点，能够提高前端开发的效率。而antv是一个强大的数据可视化框架，提供了丰富的数据可视化组件和工具，方便用户进行数据可视化操作。 通过结合vite和antv，vite antv后台管理系统可以提供以下功能和特点： 1. 快速搭建：vite antv使用vite作为前端开发工具，具有快速打包和冷启动的特性，可以快速搭建一个后台管理系统。 2. 数据可视化：antv框架提供了丰富的数据可视化组件和工具，可以轻松实现各种图表、地图等数据展示效果。 3. 模块化开发：vite antv支持模块化开发，可以根据实际需求选择需要的功能模块，提高系统的可维护性和可拓展性。 4. 界面美观：vite antv通过精心设计的界面和组件，提供了美观、简洁的用户界面，提升用户体验。 5. 响应式布局：vite antv支持响应式布局，可以根据不同的设备自动调整页面布局，适配不同屏幕尺寸的设备。 总之，vite antv后台管理系统是一个基于vite和antv开发的功能丰富、界面美观的后台管理系统，能够提升开发效率和用户体验，适用于各种类型的后台管理需求。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值