github做成一个图床

实现要求

1. 一个公开的github项目
2. 该项目已经启用 GitHub Pages 静态部署
3. 创建一个 Personal access token 作为访问令牌
4. 使用 github 提供的 "@octokit/rest" npm包实现上传

实现

• 条件一： 一个公开的github项目 (略过)

• 条件二：GitHub Pages 静态部署操作方法

• 条件三：创建 Personal access token

• 条件四：使用 @octokit/rest 实现图片的上传

  使用 REST API 和 JavaScript 编写脚本 - GitHub 文档 中文

  使用 REST API 和 JavaScript 编写脚本 - GitHub 文档 英文

1. 安装

yarn add @octokit/rest

2. 使用

这是一个上传函数，目前无法直接覆盖已经存在图片（我没实现），有对应的方法实现。

/**
 * 上传图片文件到github远程仓库
 * @param file 上传的图片文件
 * @param path 上传对应仓库下的文件路径 image/user/a.png
 * @returns
 */
const handleUpload = async (file: any, path: any) => {
  if (!file) {
    console.error("Please select a file");
    return;
  }
  // 文件路径处理
  try {
    const octokit = new Octokit({
      auth: gbPersonalAccessTokens, // 替换为你的 GitHub 个人访问令牌
    });
    // 读取文件内容
    const content = await readFileAsBase64(file);
    // 替换为你的 GitHub 仓库信息和上传路径
    const owner = gbOwner; // 替换为目标仓库的所有者（用户或组织名）
    const repo = gbRepo; // 替换为目标仓库的名称
    const branch = "master"; // 或你的仓库的默认分支
    // 使用 Octokit 上传文件
    const response = await octokit.request(
      `PUT /repos/${owner}/${repo}/contents/${path}`,
      {
        message: "Add user photo",
        content,
        branch,
      }
    );
    console.log("File uploaded:", response);
  } catch (error) {
    console.error("Error uploading file:", error);
  }
};

将文件转换为 base64的方法

/**
 * 将文件内容转换为 base64 编码
 * @param file
 * @returns
 */
const readFileAsBase64 = (file: any) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (event: any) => {
      // 读取成功，将结果传递给 resolve
      resolve(event?.target.result.split(",")[1]);
    };

    reader.onerror = (error) => {
      // 读取失败，将错误传递给 reject
      reject(error);
    };

    // 开始读取文件
    reader.readAsDataURL(file);
  });
};

组件文件

import React from "react";

export default function OctokitUpload() {
  return (
    <div>
      <input type="file" onChange={handleFileChange} />
    </div>
  );
}

按以上步骤就可以实现一个用GitHub仓库做的图床了