React axiosを使用して画像ファイルをAPI送信したい

目的

Reactで画像などのファイルデータをAPIに送信する方法をまとめてみました。
以下の方に、参考になれば幸いです。
・Reactの画像ファイルの送り方がわからない。
・axiosを使用して送信したい。

今回は、画像ファイルと文字ファイルを同時に送っています。

導入

axiosライブラリを使用する準備をします。

ターミナル

npm install axios

画像ファイルの送信方法

以下のコードで送信することができた。

send,js

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

function Send() {
 const [title,setTitle] = useState();
 const [image,setImage] = useState();

 const handleSubmit = () => {

   const file = new FormData()
   file.append("title",title);
   file.append("image", image[0]);

axios
      .post('http://localhost/api/sendimage',file,
        {
          headers: {
          'content-type': 'multipart/form-data',
          },
        }
      )
      .then(response => {
        console.log(response);
      })
 }

   return (
     <>
      <p>ファイル送信</p>
       <input type="text" placeholder="写真のタイトル"
onChange={event => setTitle(event.target.value)} />

      <input accept="image/*" multiple type="file"
onChange={event => setImage(event.target.files)} />
<button onClick={handleSubmit}>送信</button>
</>
);
}

export default Send;

解説

まずは、axiosライブラリをimportする。

send,js

import axios from 'axios';

画像ファイル、文字データ（写真タイトル）をuseStateに保管し、送信ボタンクリックでAPI通信が発火します。
ここでの注意点はonChangeでファイルを保管する際に、画像ファイルはevent.target.filesを使用し、
文字ファイルはevent.target.valueを使用する。

send.js

<input type="text" placeholder="写真のタイトル"
onChange={event => setTitle(event.target.value)} />
<input accept="image/*" multiple type="file"
onChange={event => setImage(event.target.files)} />
<button onClick={handleSubmit}>送信</button>

API通信のところとなります。

send.js

const handleSubmit = () => {

  const file = new FormData();
  file.append("title",title);
  file.append("image", image[0]);

axios
    .post('http://localhost/api/sendimage',file,
      {
         headers: {
          'content-type': 'multipart/form-data',
          },
       }
     )
    .then(response => {
        console.log(response);
     })
}

まず、FormDataを定義します。
FormDataに、先程useStateに保管した画像ファイル及び文字データを追加します。

send.js

const file = new FormData();
file.append(“title”,title);
file.append("image", image[0]);

axios.postでAPI送信します。
先程定義したFormData={inputでuseStateに保管した画像ファイル}を送ります。
その際に、headerとして 'content-type': 'multipart/form-data'を指定します。
'multipart/form-data'は文字、ファイルなどの複数の種類のデータを一度に送信できる形式です。

send.js

axios
  .post('http://localhost/api/sendimage',file,
    {
      headers: {
        'content-type': 'multipart/form-data',
      },
    }
  )

まとめ

今回は、Reactで画像ファイルをAPI送信する方法をまとめてみました。
Laravelで受け取る側も作っているので、今後まとめますね。