multipart/form-data の扱い（FormData）
Web アプリで「ファイルやフォームデータをサーバーに送る」ときによく使われるのが multipart/form-data です。
これは「複数のデータ（テキストやファイル）をひとまとめにして送る」ための形式です。
初心者は「FormData = フォームを JavaScript で作る箱」と覚えると理解しやすいです。
基本のコード例
// input要素からファイルを取得
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
// FormDataを作成
const fd = new FormData();
fd.append('file', file); // ファイルを追加
fd.append('username', 'Aki'); // テキストも追加
// fetchで送信
fetch('/upload', {
method: 'POST',
body: fd
})
.then(res => res.json())
.then(data => console.log('アップロード成功:', data))
.catch(err => console.error('エラー:', err));
FormData→ フォームデータを表すオブジェクト。append(key, value)→ データを追加。ファイルも文字列もOK。fetchの body に渡す → 自動でmultipart/form-data形式に変換される。
よく使うテンプレート集
複数ファイルを送る
const fd = new FormData();
fd.append('file1', file1);
fd.append('file2', file2);
fetch('/upload', { method: 'POST', body: fd });
フォームの値をまとめて送る
const fd = new FormData();
fd.append('name', 'Mika');
fd.append('age', 25);
fd.append('avatar', file);
fetch('/register', { method: 'POST', body: fd });
async/await で書く
async function upload(file) {
const fd = new FormData();
fd.append('file', file);
const res = await fetch('/upload', { method: 'POST', body: fd });
const result = await res.json();
console.log(result);
}
例題: プロフィール登録フォーム
<form id="profileForm">
<input type="text" name="username" />
<input type="file" name="avatar" />
<button type="submit">送信</button>
</form>
<script>
const form = document.getElementById('profileForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const fd = new FormData(form); // form要素から自動で収集
const res = await fetch('/profile', { method: 'POST', body: fd });
const data = await res.json();
console.log('登録結果:', data);
});
</script>
- 効果:
FormData(form)を使うとフォーム全体をまとめて送れる。
実務でのコツ
- ヘッダーは不要:
fetchにFormDataを渡すと自動でContent-Type: multipart/form-dataが設定される。 - サーバー側の受け取り: Node.js なら
multer、PHP なら$_FILESで受け取れる。 - 大きなファイル: 進捗表示や分割アップロードが必要になる場合もある。
練習問題（商品登録）
const fd = new FormData();
fd.append('productName', 'Laptop');
fd.append('price', 120000);
fd.append('image', file);
fetch('/add-product', {
method: 'POST',
body: fd
});
直感的な指針
FormData= フォームデータを作る箱。appendでファイルや文字列を追加。fetchに渡すと自動で multipart/form-data になる。- 初心者は「ファイルだけ」「ファイル＋テキスト」「フォーム全体」で練習すると理解が深まる。
これを覚えれば「ファイルやフォームデータをサーバーに送る」仕組みを簡単に作れるようになり、画像アップロードやユーザー登録などの機能を実装できます。