LaravelでJavaScriptのfetchによる非同期ファイルアップロード方法

PHPのフレームワークLaravelでJavaScriptを使ってファイルを非同期でアップロード処理をする必要がありましたのでサンプルコードを掲載します。
※Laravel6以降で動作確認済み

  const FileUploadFetch = (f) => {
    var formData = new FormData();
    formData.append('paramA', 'dataA');
    formData.append('paramB', 'dataB');
    formData.append('file', f);

    fetch('/sample/upload', {
      method: "POST",
      body: formData,
      credentials: "same-origin",
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
    })
    .then((response) => response.json())
    .catch(error => console.log('Error:', error))
    .then((response) => {
      console.log('Success:', JSON.stringify(response))
    });
  }

おすすめ記事

TIPS一覧へ戻る

TIPSカテゴリー