文件上传 File uploads

未匹配的标注

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 访问来做到这一点。

多部分限制

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

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

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

本文章首发在 LearnKu.com 网站上。

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

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

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

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~