Chủ Nhật, 26 tháng 7, 2026

🚀 Laravel 12 (2026) — Bài 20 — Upload File

Ở bài trước, chúng ta đã học cách Validation dữ liệu trước khi lưu vào cơ sở dữ liệu.

Tuy nhiên, một Blog hoặc CMS không chỉ có văn bản mà còn cần hình ảnh minh họa cho bài viết, ảnh đại diện người dùng hoặc các tệp đính kèm.

Laravel cung cấp hệ thống Storage giúp việc tải lên (Upload) và quản lý tệp trở nên đơn giản, an toàn và dễ mở rộng.

Trong bài này, chúng ta sẽ xây dựng chức năng tải ảnh đại diện cho Post.

Upload File là gì?

Upload File là quá trình người dùng gửi tệp từ máy tính lên máy chủ.

Ví dụ:

Ảnh bài viết.
Avatar người dùng.
File PDF.
Video.
Tài liệu Word.

Laravel sẽ tiếp nhận tệp thông qua đối tượng Request.

Chuẩn bị cơ sở dữ liệu

Trong bảng posts, thêm cột lưu đường dẫn ảnh.

Tạo Migration:

php artisan make:migration add_image_to_posts_table

Migration:

Schema::table('posts', function (Blueprint $table) {

    $table->string('image')
          ->nullable()
          ->after('content');

});

Chạy Migration:

php artisan migrate

Form Upload

Blade:

<form
    action="{{ route('posts.store') }}"
    method="POST"
    enctype="multipart/form-data">

    @csrf

    <input
        type="text"
        name="title">

    <textarea
        name="content"></textarea>

    <input
        type="file"
        name="image">

    <button type="submit">

        Lưu bài viết

    </button>

</form>

Thuộc tính:

enctype="multipart/form-data"

là bắt buộc khi gửi tệp.

Validation

Kiểm tra hình ảnh:

$request->validate([

    'title' =>

        'required|max:255',

    'content' =>

        'required|min:20',

    'image' =>

        'nullable|image|mimes:jpg,jpeg,png,webp|max:2048',

]);

Ý nghĩa:

image: phải là ảnh.
mimes: chỉ cho phép các định dạng.
max:2048: tối đa 2 MB.

Kiểm tra File

if ($request->hasFile('image')) {

    //

}

Nếu người dùng chọn ảnh thì mới xử lý.

Lưu File

$image = $request
    ->file('image')
    ->store(
        'posts',
        'public'
    );

Laravel sẽ lưu ảnh vào:

storage/app/public/posts

Biến $image sẽ chứa đường dẫn, ví dụ:

posts/aBcD12345.jpg

Lưu Post

Post::create([

    'title' =>

        $request->title,

    'content' =>

        $request->content,

    'image' =>

        $image ?? null,

    'category_id' =>

        $request->category_id,

    'user_id' => 1,

]);

Đường dẫn ảnh sẽ được lưu vào cột image.

Tạo liên kết Storage

Laravel không hiển thị trực tiếp thư mục storage.

Chạy:

php artisan storage:link

Laravel sẽ tạo:

public/storage

trỏ tới:

storage/app/public

Chỉ cần chạy một lần cho mỗi dự án.

Hiển thị hình ảnh

Blade:

@if($post->image)

    <img
        src="{{ asset('storage/' . $post->image) }}"
        alt="{{ $post->title }}"
        width="300">

@endif

Laravel sẽ hiển thị đúng đường dẫn ảnh đã lưu.

Cập nhật ảnh

Khi chỉnh sửa bài viết:

if ($request->hasFile('image')) {

    $image = $request
        ->file('image')
        ->store(
            'posts',
            'public'
        );

    $post->image = $image;

}

$post->save();

Ảnh mới sẽ thay thế đường dẫn cũ trong cơ sở dữ liệu.

Xóa ảnh cũ (Khuyến nghị)

Nếu thay ảnh mới, nên xóa ảnh cũ để tránh tệp không còn sử dụng.

use Illuminate\Support\Facades\Storage;

if (

    $post->image &&
    Storage::disk('public')
        ->exists($post->image)

) {

    Storage::disk('public')
        ->delete($post->image);

}

Sau đó mới lưu ảnh mới.

Điều này giúp tiết kiệm dung lượng lưu trữ.

Kiểm tra phần mở rộng

Có thể lấy tên gốc:

$request
    ->file('image')
    ->getClientOriginalName();

Hoặc:

$request
    ->file('image')
    ->extension();

Tuy nhiên, trong hầu hết trường hợp, nên để Laravel tự tạo tên tệp để tránh trùng lặp.

Upload nhiều ảnh

Ví dụ:

<input
    type="file"
    name="images[]"
    multiple>

Controller:

foreach (

    $request->file('images')

    as $image

) {

    $image->store(
        'posts',
        'public'
    );

}

Kỹ thuật này thường dùng cho thư viện ảnh hoặc nhiều tệp đính kèm.

Quy trình Upload

Người dùng

      │

      ▼

Chọn ảnh

      │

      ▼

Validation

      │

      ▼

Lưu vào Storage

      │

      ▼

Lưu đường dẫn vào Database

      │

      ▼

Hiển thị bằng asset('storage/...')

Đây là quy trình chuẩn trong hầu hết các ứng dụng Laravel.

Tổng kết

Trong bài này chúng ta đã học:

Upload File.
multipart/form-data.
hasFile().
store().
storage:link.
Hiển thị ảnh.
Cập nhật ảnh.
Xóa ảnh cũ.
Upload nhiều ảnh.

Upload File là chức năng không thể thiếu trong Blog, CMS, hệ thống quản lý tài liệu và nhiều ứng dụng web hiện đại.

Bài tập

Thêm cột image vào bảng posts.
Tạo Form cho phép tải ảnh.
Validation chỉ cho phép ảnh JPG, PNG và WebP.
Lưu ảnh vào thư mục storage/app/public/posts.
Hiển thị ảnh trong danh sách bài viết.
Khi cập nhật bài viết, thay thế ảnh cũ bằng ảnh mới.
Xóa ảnh cũ khỏi Storage khi không còn sử dụng.

Kết thúc PHẦN 5 — FORM

Đến đây, bạn đã hoàn thành các kiến thức nền tảng về xử lý biểu mẫu trong Laravel:

Request
Validation
Upload File

Đây là ba thành phần cốt lõi được sử dụng gần như trong mọi chức năng nhập liệu của một ứng dụng Laravel.

Bài tiếp theo

Ở Bài 21, chúng ta sẽ bắt đầu PHẦN 6 — AUTHENTICATION với Laravel Breeze, giải pháp xác thực chính thức của Laravel giúp nhanh chóng xây dựng hệ thống đăng nhập, đăng ký và quản lý người dùng theo chuẩn hiện đại.

NTM Solutions

Lớp học Vi Tính