human
base64に変換して画像アップロードする反応機能コンポーネントを作成します。
gpt
次のコードは、Base64に変換および画像アップロードするReact機能コンポーネントを作成する1つの方法です。

「@material-ui/core/button」からボタンをインポートします。

クラスImageConverterはReact.comPonentを拡張します{
  コンストラクター（小道具）{
    スーパー（小道具）;
    this.state = {
      ファイル：[]
    };
    this.convert = this.convert.bind（this）;
  }

  変換（e）{
    //最大を確認します。ファイルサイズを超えていません
    //サイズはバイトです
    if（files [0] .size> 2000000）{
      console.log（ "ファイルが大きすぎる"）;
      戻る;
    }
    var reader = new fileReader（）;
    reader.readasdataurl（e.target.files [0]）;

    reader.onload =（）=> {
      console.log（reader.result）;// base64encoded文字列
    };
    reader.onerror = error => {
      console.log（ "error："、error）;
    };
  }
  与える（） {
    戻る （
      <>
        <入力
          Accept = "image/*"
          style = {{
            ディスプレイ：「なし」
          }}
          id = "button-file"
          type = "file"
          onchange = {this.convert}
        />
        <ラベルhtmlfor = "button-file">
          <ボタン
            variant = "conted"
            color = "プライマリ"
            component = "span"
          >
            追加の画像を追加します
          </button>
        </label>
      </>
    ）;
  }
}

デフォルトのImageConverterをエクスポートします。


このReact ComponentクラスImageConverterは、画像ファイルをBase64エンコード文字列に変換するユーザーインターフェイスを提供します。
コンポーネントには次の機能があります。

 - ユーザーが選択したファイルの配列を保存する状態ファイル。
 - 選択した画像ファイルをbase64エンコード文字列に変換するメソッドを変換します。
-FileReader APIは、選択した画像ファイルをデータURLとして読み取ります。
 - 「追加の画像を追加」ボタンを含むファイル入力フィールドを表示します。
 - デフォルトのエクスポートとしてエクスポートされるため、アプリケーションの他の部分でインポートおよび使用できます。

注： @Material-UI/Core/ボタンは、ボタンをレンダリングするマテリアル-UIコンポーネントです。

このコード、または提案された変更についてさらに質問がある場合、私は喜んで支援を続けます。