Laravel Inertia - File uploads

파일 업로드

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 방문을 사용하여 폼을 제출하는 것도 가능합니다.

멀티파트 제한

일부 서버 측 프레임워크에서는 PUT, PATCH, 또는 DELETE HTTP 메소드를 사용하는 경우 multipart/form-data 요청을 기본적으로 지원하지 않습니다. 이 제한을 우회하는 가장 간단한 방법은 파일을 POST 요청을 사용하여 업로드하는 것입니다.

그러나 Laravel 및 Rails 과 같은 일부 프레임워크에서는 폼 메소드 스푸핑을 지원합니다. 이를 통해 파일을 POST를 사용하여 업로드하지만 프레임워크가 요청을 PUT 또는 PATCH 요청으로 처리하도록 할 수 있습니다. 이는 요청 데이터에 _method 속성을 포함시킴으로써 수행됩니다.

Vue 2 Vue 3 React Svelte

import { router } from '@inertiajs/vue3'

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