次のコードは、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コンポーネントです。

このコード、または提案された変更についてさらに質問がある場合、私は喜んで支援を続けます。
The following code is one way to Create a React functional component that converts and image upload to base64:

import Button from "@material-ui/core/Button";

class ImageConverter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      files: []
    };
    this.convert = this.convert.bind(this);
  }

  convert(e) {
    // check max. file size is not exceeded
    // size is in bytes
    if (files[0].size > 2000000) {
      console.log("File too large");
      return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);

    reader.onload = () => {
      console.log(reader.result); //base64encoded string
    };
    reader.onerror = error => {
      console.log("Error: ", error);
    };
  }
  render() {
    return (
      <>
        <input
          accept="image/*"
          style={{
            display: "none"
          }}
          id="button-file"
          type="file"
          onChange={this.convert}
        />
        <label htmlFor="button-file">
          <Button
            variant="contained"
            color="primary"
            component="span"
          >
            Add Additional Images
          </Button>
        </label>
      </>
    );
  }
}

export default ImageConverter;


This React component class ImageConverter provides a user interface to convert an image file to a base64-encoded string.
The component has the following features:

- a state files that stores an array of files selected by the user.
- a method convert that converts the selected image file to a base64-encoded string.
- the FileReader API to read the selected image file as a data URL.
- displays a file input field with a "Add Additional Images" button.
- is exported as the default export, so it can be imported and used in other parts of the application.

Note: @material-ui/core/Button is a Material-UI component that renders a button.

If you have any further questions, about this code, or proposed changes, I would be happy to continue helping.