檔案上傳

FormData 轉換

當發出包含檔案（甚至是巢狀檔案）的 Inertia 請求時，Inertia 會自動將請求資料轉換為 FormData 物件。此轉換是為了透過 XHR 提交 multipart/form-data 請求所必需的。

如果您希望請求始終使用 FormData 物件，無論資料中是否存在檔案，您可以在發出請求時提供 forceFormData 選項。

import { router } from '@inertiajs/vue3'

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

您可以透過以下網址了解更多關於 FormData 介面的資訊 MDN 文件.

在 0.8.0 版本之前，Inertia 不會自動將請求轉換為 FormData。如果您使用的是此版本之前的 Inertia 版本，則需要手動執行此轉換。

檔案上傳範例

讓我們檢視一個使用 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 限制

使用 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,
})