文件上传

FormData 转换

当进行包含文件（甚至嵌套文件）的 Inertia 请求时，Inertia 会自动将请求数据转换为 FormData 对象。这种转换对于通过 XHR 提交 multipart/form-data 请求是必要的。

如果您希望请求始终使用 FormData 对象，无论数据中是否存在文件，您可以在进行请求时提供 forceFormData 选项。

import { router } from '@inertiajs/vue3'

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

您可以通过其 MDN 文档 了解更多关于 FormData 接口的信息。

在 0.8.0 版本之前，Inertia 不会自动将请求转换为 FormData。如果您使用的是 0.8.0 版本之前的 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/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,
})