Tải file lên

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Chuyển đổi `FormData`

Khi thực hiện request Inertia có chứa file (kể cả file lồng nhau), Inertia sẽ tự động chuyển đổi dữ liệu request thành object FormData. Việc chuyển đổi này là cần thiết để gửi request multipart/form-data qua XHR. Nếu muốn request luôn sử dụng object FormData bất kể dữ liệu có chứa file hay không, bạn có thể truyền tùy chọn forceFormData khi thực hiện request.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Bạn có thể tìm hiểu thêm về interface FormData trong tài liệu MDN.

Ví dụ tải file lên

Hãy xem một ví dụ hoàn chỉnh về tải file lên bằng Inertia. Ví dụ này bao gồm cả input văn bản name và input file 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>

import { useForm } from '@inertiajs/react'

const { data, setData, post, progress } = useForm({
    name: null,
    avatar: null,
})

function submit(e) {
    e.preventDefault()
    post('/users')
}

return (
    <form onSubmit={submit}>
        <input type="text" value={data.name} onChange={e => setData('name', e.target.value)} />
        <input type="file" onChange={e => setData('avatar', e.target.files[0])} />
        {progress && (
            <progress value={progress.percentage} max="100">
                {progress.percentage}%
            </progress>
        )}
        <button type="submit">Submit</button>
    </form>
)

<script>
    import { useForm } from '@inertiajs/svelte'

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

    function submit() {
        $form.post('/users')
    }
</script>

<form on:submit|preventDefault={submit}>
    <input type="text" bind:value={$form.name} />
    <input type="file" on:input={e => $form.avatar = e.target.files[0]} />
    {#if $form.progress}
        <progress value={$form.progress.percentage} max="100">
            {$form.progress.percentage}%
        </progress>
    {/if}
    <button type="submit">Submit</button>
</form>

<script>
    import { useForm } from '@inertiajs/svelte'

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

    function submit(e) {
        e.preventDefault()
        $form.post('/users')
    }
</script>

<form onsubmit={submit}>
    <input type="text" bind:value={$form.name} />
    <input type="file" oninput={e => $form.avatar = e.target.files[0]} />
    {#if $form.progress}
        <progress value={$form.progress.percentage} max="100">
            {$form.progress.percentage}%
        </progress>
    {/if}
    <button type="submit">Submit</button>
</form>

Ví dụ này sử dụng form helper của Inertia để thuận tiện vì helper cho phép truy cập dễ dàng tiến trình upload hiện tại. Tuy nhiên, bạn vẫn có thể submit form bằng Inertia visit thủ công.

Giới hạn của multipart

Việc tải file bằng request multipart/form-data không được hỗ trợ nguyên bản trong một số framework phía máy chủ khi sử dụng các HTTP method PUT, PATCH hoặc DELETE. Cách đơn giản nhất để khắc phục giới hạn này là tải file bằng request POST. Tuy nhiên, một số framework như Laravel và Rails hỗ trợ form method spoofing, cho phép tải file bằng POST nhưng để framework xử lý request như PUT hoặc PATCH. Cách này được thực hiện bằng cách thêm thuộc tính _method vào dữ liệu request.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v2 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Chuyển đổi `FormData`

Ví dụ tải file lên

Giới hạn của multipart

Tài liệu chính thức

​Chuyển đổi FormData

​Ví dụ tải file lên

​Giới hạn của multipart

​Tài liệu chính thức

Chuyển đổi `FormData`

Ví dụ tải file lên

Giới hạn của multipart

Tài liệu chính thức