Die GitHub-API gibt beim Übergeben von Daten 422 Unprocessable Entity zurück

Question

Ich habe versucht, eine Datei über den HTML-Prozess an mein Github-Repository zu senden, aber es ist mit Fehler 422 fehlgeschlagen. Ich habe das Gefühl, dass meine Zahlen gut sind, aber ... nein. Ich bin in diesem Teil ein Anfänger und kann keine Lösung für mein Problem finden.

In diesem Artikel: https://levelup.gitconnected.com/how-to-upload-images-to-github-via-javascript-59163b8fff27

Jemand hat darüber geschrieben, die Daten mit base64 aufzuteilen, was ein Track sein könnte, aber ich weiß nicht, wie ich ihn in meinem Fall kodieren soll. Unten sind meine Versuche und Misserfolge! ! !

// 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();
}

und Fehlermeldung

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 = () => {
    <>
        
        
        
    
}

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