实现自己的图床


PicGo + Gitee(码云)实现markdown图床

效果图:

在这里插入图片描述

PicGo + Gitee(码云)实现markdown图床

PicGo + Gitee(码云)实现markdown图床

1. 安装

  • PicGo
  • picgo-plugin-gitee-uploader插件

首先打开picgo官网,下载安装包

img

如果速度慢,点击此地址下载:

mac: mac PicGo2.3.0

win: win PicGo2.3.0

安装之后打开主界面

image-20200911093623043

选择最底下的插件设置,搜索gitee

image-20200911093648928

点击右边的gitee-uploader 1.1.2开始安装

这里注意一下,必须要先安装node.js才能安装插件,没装的自己装一下,然后重启就行。


2. 建立图床库

点击右上角的+号,新建仓库

image-20200911093729491

新建仓库的要点如下:

  1. 输入一个仓库名称
  2. 其次将仓库设为公开
  3. 勾选使用Readme文件初始化这个仓库

image-20200911135935950

点击下一步完成创建


3. 配置PicGo

安装了gitee-uploader 1.1.2插件之后,我们开始配置插件

配置插件的要点如下:

image-20200911093830243

  • repo:用户名/仓库名称,比如我自己的仓库MysticalYu/pic,找不到的可以直接复制仓库的url,复制浏览器的仓库地址,而不是页面左上角显示的,容易出现大小写问题

image-20200911093907929

  • branch:分支,这里写上master
  • token:填入码云的私人令牌
  • path:路径,一般写上img
  • customPath:提交消息,这一项和下一项customURL都不用填。在提交到码云后,会显示提交消息,插件默认提交的是 Upload 图片名 by picGo - 时间

这个token怎么获取,下面登录进自己的码云

  1. 点击头像,进入设置

img

  1. 找到右边安全设置里面的私人令牌

image-20200911093943588

  1. 点击生成新令牌,把projects这一项勾上,其他的不用勾,然后提交

image-20200911094009969

这里需要验证一下密码,验证密码之后会出来一串数字,这一串数字就是你的token,将这串数字复制到刚才的配置里面去。

image-20200911094119173

注意:这个令牌只会明文显示一次,建议在配置插件的时候再来生成令牌,直接复制进去,搞丢了又要重新生成一个。

保存,完成即可。

4. 将仓库配置成giteePage页

我们需要通过链接来访问图片,这里将刚才建立的仓库设置成GiteePage页

  1. 点击服务,选择Gitee Pages

image-20200911095044868

  1. 如果自己想使用Https的图片,比如自己的博客网站是支持SSL认证的话,可以勾选强制使用Https; 这里参考:为什么部署SSL证书后还是提示不安全

image-20200911095640287

开启成功后再次访问就会变成下面的页面,这里的更新间隔是一分钟,需要手动更新,当然也可以配置WebHook触发服务器钩子来调用API自动更新,这里不涉及这方面,不展开。

image-20200911095541779

这样我们就获得了一个可以访问的网址

通过这个网址和上面PicGo配置的Path组合就可以访问我们需要的图片的。类似这种:

https://mysticalyu.gitee.io/pic/img/20200409141450-lee-gh-2.jpg

Typora配置PicGo

**一个编写md文件的神器,官网地址:https://typora.io/ ** 使用方法和基本配置见百度谷歌。

这里说明一下如何配置PicGo文件上传到服务器。

配置如下

image-20200911094434501

  1. 配置好PigGo的执行文件
  2. 验证一下图片是否能上传成功

image-20200911094603050

这里可以选择插入图片的操作,比如直接上传服务器。

以上配置后,基本就可以实现自己的图床了。

题外

GiteePage读取的是仓库的index.html页面,所以我们可以下载一些画廊的模板来放在index页面,至于画廊如何读取上传的图片就自己琢磨吧。

附上自己的画廊地址:https://www.gschaos.club/gallery/
图床源代码 gitee图床代码地址

Spring Boot是一个用于构建Java应用程序的开源框架,它提供了快速、方便的方式来构建独立的、生产级别的应用程序。React是一个用于构建用户界面的JavaScript库,它提供了组件化的方式来构建现代化的Web应用程序。 要实现一个图床,可以使用Spring Boot来构建后端服务,使用React来构建前端界面。首先,我们可以使用Spring Boot来创建一个RESTful API服务,用于接收和处理上传的图片文件,并将其保存到服务器的文件系统或者数据库中。可以使用Spring Boot提供的各种工具和库来处理文件上传、文件存储、安全控制等功能。 接着,我们可以使用React来构建一个用户友好的前端界面,用于用户上传、浏览和管理图片。通过React组件化的特性,可以轻松地创建用户界面,包括图片上传组件、图片展示组件、图片管理组件等。同时,可以利用React的生命周期函数、状态管理等特性来优化用户体验,并提高前端界面的性能和可维护性。 在将Spring Boot后端服务和React前端界面集成起来时,可以使用RESTful API来实现数据的传输和交互。通过在前端使用Ajax或者Fetch等技术来调用后端API服务,并实现图片的上传、展示和管理功能。 综上所述,使用Spring Boot和React来实现图床是一个非常合适的选择。Spring Boot提供了强大的后端服务能力,而React则提供了灵活、高效的前端界面构建方式,通过它们的结合可以实现一个功能完善、易用的图床应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值