JavaScript Fetch API を使用してファイルをアップロードするにはどうすればよいですか?

JS フェッチ API を使用したファイルのアップロード: 秘密の解明

JS フェッチ API を使用してファイルをアップロードする方法を理解するのは、困難な作業になる場合があります。この概念を明確にするために、送信イベントのキャプチャ時にアップロードするファイルを送信する方法を詳しく説明します。

まず、input タグを使用すると、file input を使用してファイル (または複数) を選択できることを覚えておいてください。方法。送信イベントをキャッチするには、コード内で適切なイベント ハンドラーを指定する必要があります。

ここからが重要な部分です。フェッチを使用してファイルを送信します。この構文は次のとおりです。

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

ファイルを正常に送信するには、body プロパティにファイル データを設定し、正しい Content-Type ヘッダーを設定する必要があります。これを行う方法を示す拡張コード スニペットを次に示します。

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

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

このコードでは、FormData を使用して新しいフォーム データ オブジェクトを作成し、ファイル データは append メソッドを使用して追加されます。 Content-Type ヘッダーは、ファイル アップロード リクエストに必要な multipart/form-data に自動的に設定されます。

これを設定すると、コードはフェッチ API を使用してサーバーにファイルを簡単にアップロードできます。

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