JavaScript Fetch API を使用してファイルをサーバーに送信するにはどうすればよいですか?

JS フェッチ API を使用してファイルをアップロードする方法

フェッチ API を介したファイルのアップロードは、Web アプリケーションからサーバーにデータを送信するための貴重な手法です。開発者として、ファイルのアップロードを効果的に処理するプロセスを理解することが不可欠です。

ユーザーがファイルを選択できる入力フィールドがあるシナリオを考えてみましょう。

<input type="file">

送信時ファイル入力を含むフォームの場合は、 fetch() を使用してファイルをサーバーに送信する必要があります。ただし、このタスクではリクエスト本文の構造に細心の注意を払う必要があります。

fetch('/files', {
  method: 'POST',
  // What goes here? How do we construct the body?
})

リクエストの本文を構築するには、FormData インターフェイスを利用します。このインターフェイスを使用すると、ファイル オブジェクトを含めることができるキーと値のペアのコレクションを作成できます。

const formData = new FormData();
formData.append('file', input.files[0]);

上記のコードでは、append メソッドを使用して、選択したファイルを FormData オブジェクトに追加します。最初の引数はキーを表し、2 番目の引数はファイル入力から取得されたファイル オブジェクトです。

さらに、必要に応じて FormData オブジェクトに他のキーと値のペアを含めることができます。たとえば、ユーザー データを追加できます。

formData.append('user', 'hubot');

FormData オブジェクトの準備ができたら、最終的に次のようにフェッチ リクエストを作成できます。

fetch('/avatars', {
  method: 'POST',
  body: formData
})

このリクエストは選択されたファイルを送信します。 FormData オブジェクト内の追加データはサーバー上の「/avatars」エンドポイントに送信されます。その後、サーバーは必要に応じてファイルを処理できます。

以上がJavaScript Fetch API を使用してファイルをサーバーに送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。