如何通过 Gitee API 上传文件到指定仓库作为图床使用

首先,进入Gitee官方API文档:gitee.com/api/v5/swag…,找到仓库 –> 新建文件接口

该接口使用的是 POST 方法,接受 access_tokenownerrepopathcontentmessagebranch 等必要参数信息

请求成功后的返回结果数据结构如下

我们模拟请求测试通过后,来实现一个 Web 版 Gitee 上传图片的工具,我们需要在页面中添加一个上传文件的组件和参数配置的页面。根据以上模拟的结果,除了需要新建一个仓库,取得它的仓库名称、私人令牌、分支名外,其他是需要我们使用程序生成的

我们使用 axios 封装一个公共的请求方法 fetch,然后从配置中获取需要的参数

async function giteeUpload(content, filename) {
  const { username, repo, branch, accessToken } = getConfig();
  const dir = getDir();
  const dateFilename = getDateFilename(filename);
  const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
  const res = await fetch({
    url,
    method: "POST",
    data: {
      content,
      branch,
      access_token: accessToken,
      message: `Upload by ${window.location.href}`,
    },
  });
  return encodeURI(res.content.download_url);
}

这里需要注意的是,我们需要在上传组件获取到文件,要对文件内容进行 Base64 编码

export const toBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result.split(",").pop());
    reader.onerror = (error) => reject(error);
  });

评论

还没有评论...留下你的评论!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sidebar