轻快图床
https://github.com/ischenliang/quickly-picture-bed轻快图床：使用koa + vue3.x + typescript全家桶实现的在线图床系统，支持在线存储桶插件开发，目前支持腾讯云COS、又拍云Upyun、阿里云OSS、github图床、gitee图床、本地存储桶、七牛云 KODO等在线图床存储桶。市面上最火的图床系统是picgo，但由于picgo是桌面应用程序，换了新电脑需要重新下载安装配置，十分麻烦，为了解决该问题，故诞生了这款系统。
https://camo.githubusercontent.com/dd7ec1a7b918e668cc728ec0d2da4d25770a48e682ae2337596b5c7a7ea3335e/687474703a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313733343231352e706e67基于Koa2 + Vue3.x + Vite3.x + typescript开发的轻量级快捷图片管理系统、图床系统https://camo.githubusercontent.com/3976eae3bbc85c98846b5c02289fb8421cdb526cf08adbbd733e9e787b63c2c5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7675656a732d332e322e34302d627269676874677265656e https://camo.githubusercontent.com/48273d33fc49a777292c3de98dc8708f042d4fb4f288c915a55383ebabf02e3c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f766974652d332e312e342d627269676874677265656e https://camo.githubusercontent.com/6f055a92a1ea2006cc739d9b52398be3d338521659f7398bfcb55e06efba332f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f767565726f757465722d342e312e352d627269676874677265656e https://camo.githubusercontent.com/ccdb6289fddba7effb2c4e60c6ed858008590c802d9ba5d4e204973856e1cb52/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f656c656d656e742d2d706c75732d322e322e31372d627269676874677265656e https://camo.githubusercontent.com/4d3730c38bc268cb5bdd683d9aabb9dc44881a62e87827c177adda89a8cf2b97/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f70696e69612d322e302e32322d627269676874677265656e https://camo.githubusercontent.com/d0d4485c8553efbacca22518979ce317c65adf6e6e18c355270554b9022f997c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f747970657363726970742d342e382e342d627269676874677265656e https://camo.githubusercontent.com/040f7037dcec8eb4d4f20bfa624105d345d3811603d0bdd7ad92d17a4c372d53/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6b6f612d322e782d627269676874677265656e https://camo.githubusercontent.com/e8579bfcbc07d0203a9a9cf90d51618d6d2fbef0c2e3c889a8cd546676294520/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6b6f612d2d74732d2d636f6e74726f6c6c6572732d332e782d627269676874677265656e https://camo.githubusercontent.com/560d44eb6288d08877de340c47bc10a84411de7314352fa49b9fa2cfa175d7b2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f73657175656c697a652d362e782d627269676874677265656e https://camo.githubusercontent.com/31894f7e6478a67675656ed79a34c9ede4e8cf7140e7a8d569306549f2e9b733/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d7973716c2d627269676874677265656e https://camo.githubusercontent.com/d20820d778e51e92bacdf37984e64935d16ba9eb6adf75a9bc7940e897e37b0c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a736f6e776562746f6b656e2d627269676874677265656e简介程序员日常就是写博客，当然写博客时就会涉及到在博文中插入图片，所以往往会使用图床来进行图片资源管理，市面上较流行的图床系统是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待办功能 TODO后期待开发的功能列表/优化部分展示
[*]数据迁移/数据备份
考虑到有的用户原先使用的是其他图床系统，需要将数据迁移到本系统中；或者需要将本系统中的图片迁移到其他图床系统中。
[*]存储桶支持一键导出所有图片(即将该存储桶中的图片一键批量导出到zip包中)
[*]存储桶支持一键导入所有图片(即将zip包中的图片一键批量导入到该存储桶中)
考虑到有的用户需要将相册中的图片导入或者导出做备份工作
[*]相册支持一键导出所有图片(即将该相册中的图片一键批量导出到zip包中)
[*]相册支持一键导入所有图片(即将zip包中的图片一键批量导入到该相册中)
[*]新增存储桶插件
考虑到很多用户在使用“哔哩哔哩图床”和“csdn图床”，为了方便用户的使用，管理员需新增如下两个存储桶插件：
[*]bilibili存储桶
[*]csdn存储桶
[*]首页上传区
目前首页上传区存在的问题，如果用户上传的图片多且超清，会导致上传时间比较长，如果此时用户切换菜单到其他页面，会导致图片上传不成功问题，为了解决该问题需要配置一个“全局任务中心”，用户图片上传进度检测，由于是全局的，所以用户切换页面不会造成上传失败问题。
[*]快捷键绑定实际事件
目前只完成了快捷键绑定设置功能，还需完善到实际的事件绑定，例如：快捷上传快捷键Ctrl + Shift + P，需要自动进入到个人中心页面。
[*]提示功能
根据用户的习惯配置是否开启上传成功等相关的消息提示。
[*]鉴黄能力
有的用户在本系统上上传【颜色图片】，属于不合法行为，故需接入鉴黄能力，若用户上传的图片是【有颜色图片】则上传失败。
[*]新增其他图片处理的插件
例如：图片是否添加水印(文字水印|图片水印)插件、图片裁剪旋转缩放插件、图片压缩插件、图片滤镜、图片标注等图片处理相关插件。
[*]整合markdown工具
大对数人使用markdown工具都是使用typora，然后直接在typora整合picgo实现图片上传功能，所以其实大多数都不会单独上传图片，故本系统需增加一项文档管理功能，可以对文章进行管理。大致界面设计如下: https://camo.githubusercontent.com/93fcfc8b12d2fcad3d6c72f75cb81f7ad0836ad1b1b454cc04b0a9114382cddd/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330333031313035303539342e706e67 https://camo.githubusercontent.com/52f3e532e316af764bad29f2a7a52761f0a3d448783c71f2c9065f4c0061021d/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f323032333033303131303531323031302e706e67 主要包括的功能项：
[*]文档目录管理
[*]文档文章管理
[*]导出markdown文件、导出html文件
环境
[*]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
使用下面的命令全局安装typescriptnpm install typescript -gnpm install nodemon -gnpm install ts-node -g
4. 克隆代码
使用git clone命令将代码克隆到本地，或者直接下载压缩包到本地并解压5. 执行sql文件
系统提供默认初始化数据库sql文件，打开并复制sql/picture-bed-backup.sql，在navicat或者其他工具中执行该sql文件。该sql文件中默认提供了一个管理员账号，方便用户初次使用时登录管理员账号: admin@163.com管理员密码: 000000
6. 修改数据库连接
打开server/src/global.config.ts文件，将数据库连接服务修改成自己的数据库ip、用户名、密码等/** * mysql数据库配置 */export const databaseConfig = {host: 'localhost', // 数据库ip，默认是localhostport: 3306, // 数据库端口，默认3306database: 'picture-bed-backup', // 数据库username: 'root', // mysql用户名，默认是rootpassword: 'xxxx' // mysql密码}
7. 依赖安装# 前端依赖安装cd clientnpm install# 服务端依赖安装cd servernpm install
8. 项目启动
首先将后端服务启动# 服务端启动cd servernpm run start
在运行前端代码前还需要做一步操作，打开client/public/global.config.js文件，修改window.uploader_ip，将下面的locahost:3002改成你本地启动的server的ip和端口(如果是部署上线时需进行此步，本地调试可跳过)。window.uploader_ip = 'localhost:3002'
然后执行下面命令运行前端代码# 前端项目启动cd clientnpm run dev
控制台出现如下如所示即代表启动成功 https://camo.githubusercontent.com/61c26c415ceb7021b60b9a3e42ae555686d08f5f775bf7babc89dd651e83e9db/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313731313532362e706e67
https://camo.githubusercontent.com/c08c0afb4884d23f7278e7434a28bbd606ab00124910f255a8407050c79f5ddb/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313731323531392e706e679. 配置邮箱服务和ip定位服务 使用系统提供的默认管理员账号admin@163.com登录系统，点击左侧菜单栏上的系统配置菜单，进入系统配置页面，然后点击顶部的系统配置tab栏，找到ip定位服务配置以及邮件服务配置填写相关数据即可。 https://camo.githubusercontent.com/bf5b5a55ae5283e1860e6c2c24dce1a589559b6976a839bd8483499f461ea683/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330333037303931313534312e706e67 注意：
[*]本系统预设了两种ip定位服务
[*]百度地图：获取开发者秘钥的前提需要登录百度地图开放平台注册账号，并入驻成为开发者，创建服务端类型的应用，复制应用的AK填写到上面截图中的开发者秘钥中，然后点击保存按钮，此时就开启了ip定位服务。 https://camo.githubusercontent.com/caa96927bb0a339e6627865d815f3337a0339f17ae84765d11a866b23d440d1d/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330333037303931343434342e706e67
[*]高德地图：获取开发者秘钥的前提需要登录高德地图开放平台注册账号，并入驻成为开发者，创建web服务类型的应用，复制应用的AK填写到上面截图中的开发者秘钥中，然后点击保存按钮，此时就开启了ip定位服务。 https://camo.githubusercontent.com/44a63f15ea8c5cb930b220db8547a764bd850f5a81d667ec68daff497eff8c67/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330333037303931363531332e706e67
[*]本系统为了方便用户使用，提供了使用邮箱注册账号、邮箱找回密码等功能，默认使用的是qq邮件服务，故需要配置qq邮件服务的相关数据
[*]首先登录QQ邮箱，点击设置 -> 账号，找到POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务 https://camo.githubusercontent.com/0735c1c1d8941b48b5099729c1957b1d11c6ac2b49af8cbe811f3126414eb155/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330333037303932303133312e706e67 在POP3/SMTP服务一栏，必须是上图所示的，已开启状态，开启后会拿到对应的授权码，将授权码填写到邮件服务配置一栏中的邮件授权码输入框中，并且填写发件人邮箱地址(即您启用授权码的qq邮箱) https://camo.githubusercontent.com/c4e5a085e7aafdb1a3f1241cf3bfcca21da324d71646e4c7b8778e547575260c/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f323032333033303730393232313731302e706e67
9. 项目打包部署
koa项目可以不用打包部署，直接将server目录下的内容所有内容拷贝到服务器上然后执行上述的安装步骤。# 前端项目打包部署cd clientnpm run build
将打包后生成的dist目录下的所有内容拷贝到web服务器上。预览登录https://camo.githubusercontent.com/b3e4716f8b803300ee9e6ac6c4c7a5150c054a1bcc79422750a78af80486f5e8/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732373136352e706e67注册https://camo.githubusercontent.com/ce7b8635cfee2fc2ead448f456a8e23433d650ed0440fbbe45bb3f5a205395dc/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f323032323131313031373237343831302e706e67忘记密码https://camo.githubusercontent.com/c3bc2d693f9a01a18f669be00c26574f445a8c55c3b84267774fd4d43110d6ac/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732383036332e706e67上传区https://camo.githubusercontent.com/ef1ccf3b440570aa954b00aad91747d881fafac012c9e332a23da0b0ce587a24/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313731383330372e706e67图片管理https://camo.githubusercontent.com/258b4ab586aaf619268ba081b5d194b4ca9f8a1d2d04e5319be6d94ceac56562/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313731393237342e706e67存储桶管理https://camo.githubusercontent.com/f46a8fe62855bf99435d73d00628fd17d8b3a4815f754643c422fcf86168de21/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313731393431332e706e67相册管理https://camo.githubusercontent.com/832c868ee5eb60d9bf5af20d3eed9019440ce586d39ddb42d78b291f6a47b48e/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732303039342e706e67操作日志https://camo.githubusercontent.com/1d1d06f7ea44c88e5a5a0d949f7d12d373ee999549ff5947bf5a68e05c39ebe6/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732303330392e706e67个人中心https://camo.githubusercontent.com/b16f194e8eacf1aa1171479fc3e6fe3debf0fb1b29026a10dc16c60a80cb7bbf/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732313136332e706e67 https://camo.githubusercontent.com/72f6f2740463a00d1e458a41478ed04b53902b51c41a34296a25e762b922f900/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732313338352e706e67使用习惯配置https://camo.githubusercontent.com/d446fbdab390be6292a7bf093f8265cdbc73cb27bb1f4297fa170874e6821ced/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732333338382e706e67数据统计https://camo.githubusercontent.com/b18999bc51f5f28e7e282bce8fc125014018a33c93f07e48e732841d159bccc7/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732343039342e706e67用户管理https://camo.githubusercontent.com/61bd8fcfcd7aae578e3e9a5ea8c901a7579d994bf071d3d8645e74315e4be187/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330323230313031373230372e706e67存储桶插件管理为了方便拓展，存储桶以插件的形式开发，由管理员直接在系统上进行在线开发，并且支持插件版本管理(版本回退、版本对比)。存储桶插件列表 https://camo.githubusercontent.com/9a2937daebaf4bf1934bca9fd833fc0e48792e5843bec3d406fcfd68e39698f7/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330323230313031383334392e706e67存储桶插件开发 https://camo.githubusercontent.com/7b92cab8bc191de68523a20a9295629ae5b19b422818044ad5598eeb9efa8d28/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330323230313032333337352e706e67存储桶插件开发预览 https://camo.githubusercontent.com/6b6b97d4b6d2c07ff5107fe7fb065836020a3e5df0c17351a81c405fb1cac68a/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330323230313032343232352e706e67存储桶插件版本管理 https://camo.githubusercontent.com/4a25a53a059631f395a48453654fd973a1aaa49ee81438fb431557c13e204723/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330323230313032343436312e706e67存储桶插件版本对比 https://camo.githubusercontent.com/c49d400827029ea0dbd2147ea5b48ad43b671c4a804fac99f95a979d94c27137/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323330323230313032353230322e706e67字典管理https://camo.githubusercontent.com/d6ca67b712f5f356cd11cd6fd1d74928c7ed99fe8a2477559f204c1cd10c4e26/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732353333342e706e67系统设置https://camo.githubusercontent.com/f95eef8f3691b02bac362cfdb2b0c25694b1940e85d8f1ba3ab863a2aa6d0739/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f323032323131313031373236303731302e706e67更新日志https://camo.githubusercontent.com/50a95c4a7e7289962295b230ff75363cf5c5cb175b299a8cdf10291cf313e5b1/68747470733a2f2f696d67732e69746368656e6c69616e672e636c75622f696d672f3230323231313130313732363335362e706e67联系我Email: itchenliang@163.com捐赠/打赏如果您认可我的作品，并且觉得对你有所帮助我愿意接受来自各方面的捐赠。
支付宝微信
https://camo.githubusercontent.com/6cbfdf08516d8fd21ba85bde45cff3846192f18c8c224b5b511fce77219e66b6/687474703a2f2f6c632d647a6e63736769332e636e2d6e312e6c6366696c652e636f6d2f466e58424e6b4b66686e4f596f4c70704a47535751593664556831726e4d48412f7265776172645f616c697061792e6a7067https://camo.githubusercontent.com/ee4cd10682bab23cf08467370070b0c24e1d645a39479b96c58c82523c33de02/687474703a2f2f6c632d647a6e63736769332e636e2d6e312e6c6366696c652e636f6d2f50414d42394168346c75464c6956767770366f56683670656c79507564734e4b2f7265776172645f77656978696e2e6a7067
页:
[1]