Tải file lên

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

Chuyển đổi sang 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/vue2'

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

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. Trước phiên bản 0.8.0, Inertia không tự động chuyển request sang FormData. Nếu đang sử dụng bản phát hành Inertia cũ hơn phiên bản này, bạn cần tự thực hiện việc chuyển đổi.

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.

<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/vue2'

export default {
    data() {
        return {
            form: useForm({
                name: null,
                avatar: null,
            }),
        }
    },
    methods: {
        submit() {
            this.form.post('/users')
        },
    },
}
</script>

<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" value={data.avatar} 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'

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

Ví dụ này sử dụng form helper của Inertia để thuận tiện hơn, vì form helper cho phép truy cập dễ dàng vào tiến trình tải lên hiện tại. Tuy nhiên, bạn vẫn có thể gửi form bằng các lần truy cập Inertia 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ợ giả lập HTTP method của form, cho phép bạn 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/vue2'

router.post(`/users/${user.id}\

import { router } from '@inertiajs/vue3'

router.post(`/users/${user.id}\

import { router } from '@inertiajs/react'

router.post(`/users/${user.id}\

import { router } from '@inertiajs/svelte'

router.post(`/users/${user.id}\

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

Nâng cao

Chuyển đổi sang 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 sang 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 sang FormData

Ví dụ tải file lên

Giới hạn của multipart

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