先生と生徒の会話形式で理解しよう

生徒

「先生、Reactで画像とかPDFをアップロードしたいときってどうすればいいんですか？」

先生

「その場合はAxiosを使うと便利ですよ。フォームデータを送信することで、簡単にファイルをサーバーにアップロードできます。」

生徒

「フォームデータって何ですか？」

先生

「フォームデータとは、ユーザーが入力したテキストやファイルをまとめて送信する仕組みのことです。ReactとAxiosを組み合わせると簡単に使えますよ。」

1. ファイルアップロードの基本

ファイルアップロードは、ユーザーがパソコンやスマートフォンから画像・動画・PDFなどのファイルをサーバーに送る仕組みです。たとえばプロフィール画像を設定するときや、書類を提出するときに使われます。

Reactでは、<input type="file">を使ってファイルを選択し、それをFormDataというオブジェクトに入れてサーバーに送信します。

2. Reactでファイルを選択するフォーム

まずはファイルを選択できるシンプルなフォームを作ります。


import React, { useState } from "react";

function App() {
  const [file, setFile] = useState(null);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
  };

  return (
    <div>
      <h1>ファイルアップロード</h1>
      <input type="file" onChange={handleChange} />
    </div>
  );
}

export default App;

画面に「ファイルを選択」というボタンが表示され、クリックするとPCやスマホからファイルを選べるようになります。

3. Axiosでファイルを送信する

次に、選択したファイルをサーバーに送信します。Axiosを使うと、POSTリクエストでファイルをアップロードできます。


import React, { useState } from "react";
import axios from "axios";

function App() {
  const [file, setFile] = useState(null);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    if (!file) return;
    const formData = new FormData();
    formData.append("myFile", file);

    try {
      const response = await axios.post("https://example.com/upload", formData, {
        headers: { "Content-Type": "multipart/form-data" }
      });
      console.log("アップロード成功:", response.data);
    } catch (error) {
      console.error("アップロード失敗:", error);
    }
  };

  return (
    <div>
      <h1>ファイルアップロード</h1>
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>アップロード</button>
    </div>
  );
}

export default App;

ファイルを選択して「アップロード」ボタンを押すと、サーバーにファイルが送信されます。

4. 複数ファイルのアップロード

一度に複数のファイルをアップロードしたい場合は、multiple属性を使います。


<input type="file" multiple onChange={handleChange} />

複数のファイルを選んだ場合、e.target.filesに配列のような形で格納されます。それをFormDataに順番に追加して送信します。

5. アップロードの進捗を表示する

大きなファイルをアップロードするときには、進捗（何％送信されたか）を表示すると親切です。AxiosのonUploadProgressを使うと簡単に進捗を取得できます。


axios.post("https://example.com/upload", formData, {
  headers: { "Content-Type": "multipart/form-data" },
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percent + "% アップロード完了");
  }
});

アップロード中に「50%アップロード完了」などの表示ができ、ユーザーに安心感を与えられます。