Загрузка файлов

Преобразование данных формы

При посещении, включающем файлы (даже вложенные файлы), Inertia автоматически преобразует данные запроса в объект FormData. Это необходимо, поскольку это то, что требуется для отправки запроса multipart/form-data через XHR.

Если Вы хотите, чтобы при посещении всегда использовался объект FormData, Вы можете принудительно использовать его с помощью опции forceFormData.

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

Вы можете узнать больше об интерфейсе FormData здесь.

Пример загрузки файла

Вот пример загрузки файла с помощью Inertia с использованием формы. Этот пример включает как ввод текста name, так и ввод файла avatar.

<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">Отправить</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.

Ограничения на несколько частей

Загрузка файлов с помощью запроса multipart/form-data не поддерживается на некоторых языках для методов put, patch или delete. Обходной путь здесь - просто загружать файлы, используя вместо этого post.

Некоторые фреймворки, такие как Laravel и Rails, поддержка спуфинга метода формы, что позволяет загружать файлы с помощью post, но пусть фреймворк обрабатывает запрос как запрос put или patch. Это делается путем включения атрибута _method в данные вашего запроса.

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