首先，进入Gitee官方API文档：https://gitee.com/api/v5/swagger#/postV5ReposOwnerRepoContentsPath，找到仓库 --> 新建文件接口
![3QD6@VL}Y])%]EBXCO{7}@X.png](https://ucc.alicdn.com/pic/developer-ecology/42e6ec0b95554f87b6a0ab9b3413ef6f.png?x-oss-process=image/resize,w_1400/format,webp "3QD6@VL}Y])%]EBXCO{7}@X.png")
该接口使用的是 POST 方法，接受 access_token，owner，repo，path，content，message，branch 等必要参数信息
![]MP@2EX1{Z188A1NV75E_{R.png](https://ucc.alicdn.com/pic/developer-ecology/276844eaf4674713baf694c0700738e4.png?x-oss-process=image/resize,w_1400/format,webp "]MP@2EX1{Z188A1NV75E_{R.png")
请求成功后的返回结果数据结构如下
我们模拟请求测试通过后，来实现一个 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); });
