Fetch APIから画像ファイルをJSON形式で送信する

Fetch APIのAjaxを使って画像をJSON形式で送信する

Fetch APIから画像ファイルを送信するときはForm Dataオブジェクトにファイルをセットして送信する方法がありますが、Base64形式に変換してJSON形式のデータとして送信することも可能です。
この方法を使うと、画像ファイルをテキスト形式にしてサーバーと受け渡しができるようになるため扱いが便利になります。

今回は画像ファイル（PNG、JPEG、GIF）を対象としていますが、画像以外の形式のファイルも送信可能です。

以下の例では、フォームのファイル選択から画像を選択するとFileReaderオブジェクトによってファイルの読み込みを開始します。
その後、読み込んだファイルをJSON形式のデータにまとめて、Fetch APIから送信します。

まずは今回使用するページのHTMLコードから紹介していきます。

HTML コード例

<form method="post" action="" enctype="multipart/form-data">
	<input type="file" id="upload_file" name="upload_file">
</form>
<p>アップロードしたファイルをここに表示：</p>
<div id="file_area"></div>

id属性「upload_file」を持つinput要素でファイルを選択したときに、Fetch APIでファイルを送信するように設定していきます。
また、レスポンスデータからJSON形式のデータを読み込み、id属性「file_area」を持つdiv要素に画像を挿入します。

続いて、JavaSriptのコードを紹介します。
大まかな流れはコメント中の(1)〜(5)の順番です。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

	document.getElementById("upload_file").addEventListener('change', function(e){

		// (1)選択したファイルを読み込み
		let file_reader = new FileReader();
		file_reader.readAsDataURL(e.target.files[0]);

		// (2)ファイルの読み込みが完了したら実行
		file_reader.addEventListener('load', function(e) {

			// (3)JSONにするデータを作成（この時点ではObject形式）
			let data = {
				"title": "Bear",
				"image": e.target.result,
				"post_date": "2021-04-01"
			};

			// (4)Fetch APIによるデータ送信
			fetch('/test.php', { // 送信先
				method: 'post', // メソッド
				headers: { // ヘッダー指定
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(data) // 送信データをセット（ここでJSON形式に変換）
			})
			.then(response => response.json())
			.then(data => {

				// (5)レスポンスデータ（JSON形式）からページに挿入
				const file_area = document.getElementById('file_area');
				const img_element = document.createElement('img');
				img_element.src = data.image;
				file_area.append(img_element);
			});

		});

	});

});

JavaScriptコードで実行する処理の流れを詳しく解説していきます。

まず、ページが読み込まれたタイミング（DOMContentLoaded）で、フォームのファイル選択する要素「<input type="file" id="upload_file" name="upload_file">」にイベントリスナーを設定します。
ここではイベント「change」をトリガーにしていますが、これはファイルが選択された状態になったときに発生します。

ファイルが選択されるとイベントリスナーの内側の処理が実行されていきます。

(1)ではFileReaderオブジェクトを作成し、続いてすぐにreadAsDataURLメソッドから選択したファイルをBase64形式で取得します。
選択したファイル自体はe.target.filesプロパティから参照することができます。

(1)のファイル読み込みが完了すると、(2)のイベントリスナー「load」が呼び出されて実行されます。

(2)の内側ではまず送信するデータをオブジェクト形式で用意します。
ここで選択した画像ファイルもオブジェクトのimageプロパティにこのデータは後ほどJSON形式のデータに変換します。

(4)はFetch APIによるデータ送信です。
メソッド、ヘッダー、送信データを送信先のURLに送信します。
先ほどオブジェクト形式で作ったデータは、ここでJSON.stringifyメソッドを使ってJSON形式に変換してbodyにセットします。

レスポンスデータから取得したJSON形式のデータは、(5)でimg要素のsrc属性に設定して、さらにid属性「file_area」のdiv要素に挿入して表示します。

以上が一連の流れになります。
また、今回は送信先を「test.php」としていますが、PHP側では受け取ったJSON形式のデータをhtmlspecialchars関数でサニタイズだけして、そのまま返すだけの処理を実行しています。

PHP コード例

<?php

$data = json_decode(file_get_contents('php://input'), true);
$clean = array();

if( $data ) {
	foreach( $data as $key => $value ) {
		$clean[$key] = htmlspecialchars( $value, ENT_QUOTES);
	}
};

echo json_encode($data);
return;

以上が、画像ファイルをJSON形式のデータとして送信する方法でした。