Fetchを使用してファイルをアップロードする方法

簡単な方法で説明された、FetchAPIを使用してサーバーにファイルをアップロードする方法

単純なはずのタスクがありますが、サーバーへのファイルのアップロードというWebでの何時間もの調査につながることもあります。

このチュートリアルでは、を使用してこれを行う方法を説明しますfetch

ファイル入力フィールドのあるフォームがある場合:

<input type="file" id="fileUpload" />

添付しますchangeその上のイベントハンドラー:

document.querySelector('#fileUpload').addEventListener('change', event => {
  handleImageUpload(event)
})

ロジックの大部分をhandleImageUpload()関数:

const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('myFile', files[0])

fetch(’/saveImage’, { method: ‘POST’, body: formData }) .then(response => response.json()) .then(data => { console.log(data) }) .catch(error => { console.error(error) }) }

この例では、にPOSTします。/saveImage終点。

新しいを初期化しますFormDataオブジェクトとそれをに割り当てますformData変数を追加し、アップロードしたファイルをそこに追加します。複数のファイル入力要素がある場合、複数ありますappend()コール。

ザ・data秒内の変数then()JSONで解析された戻りデータが含まれます。サーバーが応答としてJSONを提供すると思います。

サーバー側にアップロードされた画像の処理方法は別のトピックであり、明日説明します。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: