说在前面
平时写文章或写代码的时候，都少不了需要将本地图片转成在线图片链接，大家都是使用什么工具进行转换的呢？相信很多人都有自己的图床工具，今天来给大家介绍一下，怎么基于Gitee和Electron来开发一个便捷的图床工具，支持图片的上传、删除、复制和快速生成markdown链接、快捷键唤起和隐藏面板，粘贴剪切板图片上传等……
框架选型
原本只是想写一个Chrome插件来实现简单功能，后面发现Chrome插件的局限性太大了，所以最后还是选择使用Electron来制作一个桌面程序。
存储方面我们可以直接使用gitee来用做图库存储，不需要额外去购买存储服务器。
准备工作
一、Gitee创建图床仓库目录
1、Gitee注册
直接到Gitee官网： Gitee - 基于 Git 的代码托管和研发协作平台 ，点击注册即可。
2、仓库创建
注册完账号后直接登录，在首页点击右上角的加号可以新建仓库
仓库信息自行填写即可
创建完仓库后我们可以新建一个文件夹用来存储图片：
3、生成授权码
打开设置里的私人令牌页面
点击生成新令牌，根据提示填写信息即可，注意保存好生成的令牌。
二、搭建electron项目
我们可以先搭建一个简单的electron项目：
- 安装 Node.js：确保你的电脑上已经安装了 Node.js。你可以从 Node.js 官方网站（https://nodejs.org）下载并安装最新版本的 Node.js。
- 创建项目目录：在你想要创建项目的位置，创建一个新的文件夹作为项目目录。
- 初始化项目：打开命令行终端，进入到项目目录，并执行以下命令初始化一个新的 npm 项目：
npm init -y
- 安装 Electron：在命令行终端中执行以下命令来安装 Electron：
npm install electron
- 创建主文件：在项目目录中创建一个名为
main.js的文件，作为 Electron 应用的主文件。 - 编写主文件代码：在
main.js文件中编写 Electron 应用的主要逻辑。例如，下面是一个简单的示例：
const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); win.loadFile('index.html'); } app.whenReady().then(() => { createWindow(); app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit(); });
- 创建 HTML 文件：在项目目录中创建一个名为
index.html的文件，作为 Electron 应用的初始页面。 - 编写 HTML 文件代码：在
index.html文件中编写你的应用界面的 HTML 代码。 - 在
package.json文件中添加启动命令：打开package.json文件，在"scripts"部分添加以下内容：
"scripts": { "start": "electron ." }
- 启动 Electron 应用：在命令行终端中执行以下命令来启动 Electron 应用：
npm start
功能实现
前面准备工作全都完成后，现在我们就有了一个简单electron项目架子和一个gitee仓库，可以开始来实现相关的功能了。
一、git操作
gitee提供了api文档，我们可以通过gitee的api文档来对我们的仓库进行上传图片和获取图片的操作。
gitee API文档地址：https://gitee.com/api/v5/swagger#/getV5ReposOwnerRepoStargazers?ex=no
这里我将需要使用到的功能写成了一个类：
1、初始化，获取配置信息
- accessToken
用户授权码，也就是我们前面生成的私人令牌。
- username
仓库所属空间地址(企业、组织或个人的地址path)，如下图：
- repo
仓库路径(path)，如下图：
- dirPath
图片存放目录地址，如下图：
- branchName
分支名，默认为master，我们可以修改成指定分支：
init(config = {}) { // 设置 Gitee 仓库信息和目录路径 this.username = config.username; this.repo = config.repo; this.accessToken = config.accessToken; this.branchName = config.branchName || "master"; this.apiUrl = "https://gitee.com/api/v5/repos/"; this.dirPath = config.dirPath; }
将以上配置信息在程序的配置里设置好即可：
2、上传图片到gitee图床目录下
根据API文档进行请求即可：
async uploadToGitee(base64Data) { try { const formData = new FormData(); formData.append("content", base64Data); formData.append("access_token", this.accessToken); formData.append("message", "上传图片"); const timeStamp = new Date().getTime(); Toast.showLoading("正在上传"); const response = await fetch( `${this.apiUrl}${this.username}/${this.repo}/contents/${this.dirPath}${timeStamp}.jpg`, { method: "POST", body: formData, } ); Toast.hide(); if (!response.ok) { throw new Error("上传图片失败"); } const data = await response.json(); Toast.showToast("图片上传成功！"); return data.content.download_url; } catch (error) { console.error(error); Toast.showToast("图片上传失败！"); throw error; } }
3、获取gitee图床目录下的所有图片
根据API文档进行请求即可：
async getImg() { try { const response = await fetch( `${this.apiUrl}${this.username}/${this.repo}/contents/${this.dirPath}`, { headers: { Authorization: `token ${this.accessToken}`, }, } ); if (!response.ok) { throw new Error("获取图片列表失败"); } const data = await response.json(); // 筛选出图片文件 const imageFiles = data.filter( (file) => file.type === "file" && file.name.match(/\.(jpg|jpeg|png|gif)$/i) ); return imageFiles; } catch (error) { console.error(error); throw error; } }
4、删除gitee图床目录下指定图片
根据API文档进行请求即可：
async deleteImg(fileName, sha, cb) { try { const response = await fetch( `${this.apiUrl}${this.username}/${this.repo}/contents/${this.dirPath}/${fileName}?access_token=${this.accessToken}&ref=${this.branchName}`, { method: "DELETE", headers: { "Content-Type": "application/json;charset=utf-8", }, body: JSON.stringify({ message: "删除图片", sha, prune: true, }), } ); if (!response.ok) { throw new Error("删除图片失败"); } Toast.showToast("删除成功"); cb && cb(); } catch (error) { console.error(error); Toast.showToast("删除失败"); throw error; } }
