Reactで画像アップロードをする方法

Reactで画像アップロードをする方法

TypeScriptを使用してReactで画像アップロード機能を実装する方法の例を示します。
この例では、画像ファイルを選択し、そのプレビューを表示する簡単なコンポーネントを作成します。
ライブラリのインストールは不要ですが、Axiosを使用してサーバーにアップロードする場合のインストール手順も含めます。

Axiosのインストール

# npm
npm install axios

# yarn
yarn add axios

コンポーネントコード (TypeScript)

import React, { useState, ChangeEvent } from 'react';
import axios from 'axios';

const ImageUpload: React.FC = () => {
    const [selectedFile, setSelectedFile] = useState<File | null>(null);
    const [previewUrl, setPreviewUrl] = useState<string | null>(null);
    const [uploadMessage, setUploadMessage] = useState<string>('');

    const fileSelectedHandler = (event: ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
            setSelectedFile(file);
            const reader = new FileReader();
            reader.onload = () => {
                setPreviewUrl(reader.result as string);
            };
            reader.readAsDataURL(file);
        }
    };

    const fileUploadHandler = async () => {
        if (!selectedFile) {
            setUploadMessage('ファイルが選択されていません');
            return;
        }

        const formData = new FormData();
        formData.append('image', selectedFile);

        try {
            const response = await axios.post('/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });
            setUploadMessage('アップロード成功: ' + response.data.message);
        } catch (error) {
            setUploadMessage('アップロード失敗: ' + error.message);
        }
    };

    return (
        <div>
            <input type="file" onChange={fileSelectedHandler} />
            {previewUrl && <img src={previewUrl} alt="Preview" style={{ width: '100px', height: '100px' }} />}
            <button onClick={fileUploadHandler}>アップロード</button>
            {uploadMessage && <p>{uploadMessage}</p>}
        </div>
    );
};

export default ImageUpload;

説明

1. ステートの設定
useStateフックを使って選択したファイル、プレビューURL、アップロードメッセージのステートを設定します。
2. ファイル選択ハンドラー
ユーザーがファイルを選択したときに実行される関数です。
選択されたファイルをステートに保存し、プレビュー用のURLを生成します。
3. ファイルアップロードハンドラー
ファイルをサーバーにアップロードする関数です。
選択されたファイルがない場合はエラーメッセージを表示し、ある場合はFormDataオブジェクトを作成してaxiosを使ってサーバーにPOSTリクエストを送信します。
4. 表示
ファイル入力、プレビュー画像、アップロードボタン、メッセージを表示します。

このコードを使って、ReactとTypeScriptを使用した画像アップロード機能を簡単に実装できます。
サーバー側のエンドポイント/uploadは適宜実装する必要があります。