文件上传 File uploads

0.11

0.11

FormData 转换

当访问包含文件（甚至嵌套文件）时，Inertia 将自动转换请求数据到 FormData 对象。这是必要的，因为这是通过 XHR 提交 multipart/form-data 请求所必须的操作。

如果您希望访问始终使用 FormData 对象，您可以使用 forceFormData 选项强制此操作。

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

您可以在 这里 学习更多关于 FormData 接口的内容。

Note, prior to version 0.8.0, Inertia did not automatically convert requests to FormData, and you'll need to manually do this.

File 上传示例

下面是一个使用表单的 Inertia 上传文件示例。此示例包含  name 文本输入和 avatar 文件输入。

Vue 3

<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>

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

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

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

    return { form, submit }
  },
}
</script>

此示例使用 表单助手，因为它使我们可以轻松访问上传进度，但您也可以通过简单 Inertia 访问来做到这一点。

多部分限制

对于 put，patch 或 delete 方法，某些语言本身不支持使用 multipart/form-data 请求上传文件。此解决办法是使用 post 来简单地上传文件。

一些框架，例如 Laravel 和 Rails, 支持表单方法欺骗，允许使用 post 方法上传文件，但让框架处理请求作为 put 或 patch。这是通过在您的请求数据中包含一个 _method 属性来完成的。

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

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/inertia/0.11/fi...

译文地址：https://learnku.com/docs/inertia/0.11/fi...