JavaScript Academy · レッスン

Fetch でファイルをアップロードする

Q: 「Fetch でファイルをアップロードする」で何を学びますか？

FormData を使ってファイルをサーバーに送信します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

FormData を使ってファイルをサーバーに送信します。

レッスン 4/413 ステップ

「Fetch でファイルをアップロードする」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

fetchでアップロードする

ファイルをサーバーに送信するには、fetchでFormDataボディをPOSTします。ブラウザーがファイルの内容を含むmultipart/form-dataへのエンコードを自動的に処理します。

FormDataを構築する

入力からファイルを取得し、その他のフィールドとともにFormDataオブジェクトへ追加します。

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

基本的なPOST

FormDataをfetchのPOSTのbodyとして渡します。レスポンスはawaitできるPromiseです。

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

Content-Typeを設定しない

よくある間違いは、Content-Typeを手動で設定することです。multipartのboundary文字列を含める必要があるため、設定はブラウザーに任せてください。自分で設定するとアップロードが正しく動作しません。

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

レスポンスを読み取る

アップロードが成功したら、response.okを確認してボディを解析します。ボディはJSONであることが多いです。

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

エラーを処理する

呼び出しをtry/catchで囲みます。fetchがrejectするのはネットワーク障害の場合だけなので、HTTPエラーステータスについてはresponse.okを確認する必要があります。

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

複数のファイルをアップロードする

appendを使って同じキーに複数のファイルを追加するか、ファイルリストをループしてすべて追加します。

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

認証などのヘッダーを追加する

Authorizationなどのヘッダーは追加できますが、Content-Typeは追加しないでください。ボディはFormDataのままにします。

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

生成したBlobを送信する

選択したファイルだけでなく、ブラウザー上で作成したデータもアップロードできます。ファイル名を指定してBlobを追加すると、生成したドキュメントを送信できます。

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

アップロードを中止する

AbortControllerを使うと、ユーザーが別のページへ移動した場合などに、時間のかかるアップロードをキャンセルできます。

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

これが重要な理由

FormDataとfetchを組み合わせると、ファイルをアップロードするための最新の標準的な方法になります。フィールドとファイルを追加し、FormDataをPOSTして、正しいboundaryを含むmultipart形式へのエンコードをブラウザーに任せます。Content-Typeを設定せず、必ずresponse.okを確認し、リソースを適切に解放してください。

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

確認問題

fetchでFormDataをPOSTするとき、Content-Typeヘッダーを手動で設定してはいけないのはなぜですか。

対話的なレッスンで答える

まとめ：fetchでファイルをアップロードする

ファイルをサーバーに送信する方法を学びました。

ファイルとフィールドをFormDataに追加し、fetchのbodyとして渡します。
Content-Typeは手動で設定しないでください。ブラウザーがmultipartのboundaryを追加します。
fetchがrejectするのはネットワークエラーの場合だけなので、response.okを確認します。
複数のファイルや生成したBlobを送信でき、AbortControllerでアップロードをキャンセルできます。

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 59
レッスン: 200

無料で学習を始めるコース全体を表示

よくある質問

「Fetch でファイルをアップロードする」レッスンは無料ですか？

はい。「Fetch でファイルをアップロードする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「Fetch でファイルをアップロードする」で何を学びますか？

FormData を使ってファイルをサーバーに送信します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Fetch でファイルをアップロードする」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る