これは、画像をbase64文字列に変換するためのReactコンポーネントです。素材のUIボタンアップロードを活用します。クレジットはhttps：//gist.github.com/wambuguedison/a195f73f118dcae977e41aa5fbef1899になります

`` `
「@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をエクスポートします。
`` `
This is a React component to convert image to base64 string. Leveraging Material UI Button upload. Credit goes to: https://gist.github.com/wambuguedison/a195f73f118dcae977e41aa5fbef1899

```
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;
```