当传递的数据时，GitHub API返回422 Unprocessable Entity

Question

我尝试通过 html 进程将文件发送到我的 github 存储库，但失败并出现错误 422。我感觉我的数据很好，但是......不。我是这部分的初学者，我找不到解决问题的方法。

在这篇文章中： https://levelup.gitconnected.com/how-to-upload-images-to-github-via-javascript-59163b8fff27

有人用 base64 写了关于分割数据的内容，这可能是一个轨道，但我不知道如何在我的情况下对其进行编码。下面是我的尝试和失败！！！

// 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/`,
            token: process.env.GATSBY_TOKEN_GITHUB,
          }
          upload_file(git, 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: { owner: string; repo: string; path: string; token: string | undefined; }, data: any) => {
  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: data
        // content: data.split('base64,')[1]
        // content: data.content
      })
    }
  );
  return await res.json();
}

和错误消息

Answer 1

我按照您的建议@AKX更新了代码，但返回的错误是相同的错误 422

// REACT
import React from "react"
// APP
import Layout from "../../components/struct/layout"


export default function ApiGithubToken() {
  return (
    

      
      
      
Sélectionner le fichier à déposer sur Github / Select your file to upload in Github
       load(event)}/>
      

      

      CHARGEZ
    
  )
}

function load(event:any) {
  if(event !== undefined && event.target.type === "file") {
    const file =  event.target.files[0];
    console.log("file",file);
    const reader = new FileReader();

    if (file) {
      reader.readAsDataURL(file);
    }

    reader.addEventListener("load", () => {
      const git= {
        owner : 'knupel',
        repo: 'gatsby_react_lab',
        path: `media/test/`,
        token: process.env.GATSBY_TOKEN_GITHUB,
      }
      upload_file(git , reader.result);
    }, false);
  }
}

const upload_file = async (git: { owner: string; repo: string; path: string; token: string | undefined; }, data: any) => {
  let final_path = `https://api.github.com/repos/${git.owner}/${git.repo}/contents/${git.path}`;
  console.log("data", data);
  const res = await fetch(final_path,
    {
      method: "PUT",
      headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${git.token}`
      },
      body: JSON.stringify({
        message: "Téléversement de votre fichier",
        content: data,
        // content: data.split('base64,')[1]
        // content: data.content
      })
    }
  );
  return await res.json();
}


export const Head = () => {
    <>
        
        
        
    
}

好事，现在文件通过了，我相信感觉很好