调用GitHub API上传文件时返回422 Unprocessable Entity错误求助

问题说明 #

通过React调用GitHub API上传文件时，始终返回422 Unprocessable Entity错误，错误提示显示"content" is not a valid base64 string。已知需要用base64处理数据，但不知道如何在React代码中实现。

错误原因 #

GitHub API的PUT上传接口要求content字段必须是文件内容的base64编码字符串，当前代码直接传入File对象，不符合接口格式要求，导致验证失败。

解决方案 #

使用FileReader读取文件内容并转换为base64格式，去除base64字符串前缀（data:[<mediatype>];base64,）后，再传入API请求的content字段。同时需注意上传路径必须包含完整文件名，否则会被识别为创建目录而非文件。

修改后的完整代码 #

// REACT
import React from "react"

export default function ApiGithubToken() {
  const load = e => {
    if(e.target !== null) {
      let files = e.target.files;
      if(files.length > 0) {
        if(files[0] !== null) {
          const git= {
            owner : 'knupel',
            repo: 'gatsby_react_lab',
            path: `media/test/${files[0].name}`, // 路径需包含完整文件名
            token: process.env.GATSBY_TOKEN_GITHUB,
          }
          // 将文件转换为base64编码
          const reader = new FileReader();
          reader.onload = function(event) {
            // 移除base64前缀，只保留编码内容
            const base64Content = event.target.result.split('base64,')[1];
            upload_file(git, base64Content);
          };
          reader.readAsDataURL(files[0]);
        }
      }
    }
  }
  return (
    <div>
      <p>Sélectionner le fichier à déposer sur Github / Select your file to upload in Github</p>
      <input type="file" name="input" onChange={load}/>
      <br/>
      <br/>
      <button type="submit">CHARGEZ</button>
    </div>
  )
}

const upload_file = async (git, content) => {
  const res = await fetch(`https://api.github.com/repos/${git.owner}/${git.repo}/contents/${git.path}`,
    {
      method: "PUT",
      headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${git.token}`
      },
      body: JSON.stringify({
        message: "Téléversement de votre fichier",
        content: content
      })
    }
  );
  return await res.json();
}

额外注意事项 #

• 确保GitHub Token拥有仓库的写入权限（repo权限），否则会返回权限相关错误。
• 若上传同名文件，需在请求体中添加sha字段（对应文件当前的SHA-1哈希值），否则会触发文件已存在的错误。

内容的提问来源于stack exchange，提问作者Knupel