ファイルアップロード

FormData変換

ファイルを含むInertiaリクエスト（ネストされたファイルも含む）を行う場合、Inertiaはリクエストデータを自動的にFormDataオブジェクトに変換します。この変換は、 multipart/form-dataリクエストをXHR経由で送信するために必要です。

データにファイルが存在するかに関わらず、常にFormDataオブジェクトを使用したい場合は、リクエスト時にforceFormDataオプションを指定できます。

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  forceFormData: true,
})

FormDataインターフェースの詳細については、 MDNドキュメント.

ファイルアップロードの例

Inertiaを使った完全なファイルアップロードの例を見てみましょう。この例には、nameテキスト入力とavatarファイル入力の両方が含まれています。

<script setup>
import { useForm } from '@inertiajs/vue3'

const form = useForm({
  name: null,
  avatar: null,
})

function submit() {
  form.post('/users')
}
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="form.name" />
    <input type="file" @input="form.avatar = $event.target.files[0]" />
    <progress v-if="form.progress" :value="form.progress.percentage" max="100">
      {{ form.progress.percentage }}%
    </progress>
    <button type="submit">Submit</button>
  </form>
</template>

この例では、フォームヘルパーが現在のアップロードの進捗状況に簡単にアクセスできるため、便宜上Inertiaフォームヘルパーを使用しています。ただし、 手動によるInertiaアクセスでもフォームを送信できます。

マルチパートの制限

multipart/form-dataリクエストを使用したファイルアップロードは、PUT、PATCH、またはDELETE HTTPメソッドを使用する場合、一部のサーバーサイドフレームワークではネイティブにサポートされていません。この制限に対する最も簡単な回避策は、代わりにPOSTリクエストを使用してファイルをアップロードすることです。

ただし、 Laravelや Railsなどの一部のフレームワークでは、フォームメソッドのスプーフィングがサポートされています。これにより、POSTを使用してファイルをアップロードできますが、フレームワークはリクエストをPUTまたはPATCHリクエストとして処理します。これは、 _method属性をリクエストデータに含めることで行います。

import { router } from '@inertiajs/vue3'

router.post(`/users/${user.id}`, {
  _method: 'put',
  avatar: form.avatar,
})