これは、画像のアップロードをbase64に変換するReact機能コンポーネントの例です。

「React」からReact、{UseState}をインポート。

const imageupload =（）=> {
  const [image、setimage] = uesestate（ ""）;

  const handleimagechange =（event）=> {
    const file = event.target.files [0];
    const reader = new fileReader（）;
    reader.readasdataurl（file）;
    reader.onloadend =（）=> {
      setimage（reader.result）;
    };
  };

  戻る （
    <div>
      <入力型= "file" onchange = {handleimagechange} />
      <br />
      <br />
      {image && <img src = {image} alt = "アップロード画像" />}
    </div>
  ）;
};

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

このコンポーネントには、ファイル入力が変更されたときにトリガーされるHandleImageChange関数があります。FileReaderオブジェクトを作成し、readasdataurlメソッドを使用して、選択したファイルをbase64エンコードデータとして読み取ります。Base64エンコードされた画像は、Setimage関数を使用してコンポーネントの状態として設定されます。コンポーネントは、状態が空でない場合はIMG要素を使用して画像を表示します。
Here's an example of a React functional component that converts an image upload to base64:

import React, { useState } from "react";

const ImageUpload = () => {
  const [image, setImage] = useState("");

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setImage(reader.result);
    };
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      <br />
      <br />
      {image && <img src={image} alt="Uploaded Image" />}
    </div>
  );
};

export default ImageUpload;

This component has a handleImageChange function that is triggered when the file input is changed. It creates a FileReader object and uses the readAsDataURL method to read the selected file as base64 encoded data. The base64 encoded image is then set as the state for the component using the setImage function. The component also displays the image using an img element if the state is not empty.