Hướng dẫn code input Upload nhiều ảnh trong Laravel

Tạo một input upload nhiều ảnh trong Laravel, tưởng là mặc định có hóa ra lại không. Mình đã như vậy còn bạn? Trong bài viết này mình sẽ hướng dẫn các bạn code input upload nhiều ảnh một lúc trong Laravel.

Trước khi bước vào hướng dẫn này, hãy chắc là bạn đã nắm rõ được về CRUD trong Laravel, hoặc bắt đầu với Một số khóa học Laravel Free từ cơ bản hay này.

Chú ý trước khi thực hiện:

Đây là dạng input select một phát nhiều hình, và có thể lưu lại luôn. Như hình ảnh dưới đây:

Form với input select nhiều ảnh
Select nhiều ảnh để upload
Select nhiều ảnh để upload
Form sau khi lựa chọn ảnh

Ví dụ đoạn code up hình cơ bản:

Các Bước thực hiện

Đối với việc upload nhiều ảnh trong Laravel sau đó lưu vào database, chúng ta có những bước sau:

  • Tạo input dạng multiple upload
  • Tạo Model và Database cho riêng phần multiple upload
  • Lưu lại file ảnh với Controller
  • Hiển thị ra ngoài trang

1. Tạo input dạng multiple upload.

Các bạn có thể thấy thuộc tính multiple xuất hiện cũng như tên input dạng mảng image[].

Với dạng kiểu Laravel Collective này:

Hoặc dạng truyền thống này:

2. Tạo Model và Database riêng.

Ở đây, các bạn hãy tạo ra một database riêng dành cho mục upload nhiều file ảnh này. Trong đó chúng ta nên tạo hai thêm 2 trường chính là:

  • content-id: Cái này dùng để lấy ra những ảnh cùng content id để hiển thị.
  • path: Còn đây là tên ảnh.
Migrate Multiple Image Upload
Migrate Multiple Image Upload

Các bạn có thể dùng lệnh:

để có thể tạo model cũng như table migration.

Liên kết Model

Tiếp vào đó, bạn cần liên kết model với nhau để có thể lấy dữ liệu từ bảng khác. Ở đây ta có files: Product.phpImageupload.php

Product.php
Product.php

Imageupload.php
Imageupload.php

Như đã nói ở trên, mục địch của bổ sung phần này vào để liên kết Model với nhau -> lấy dữ liệu.

3. Lưu input dạng mảng trong Controller

Vì là dạng mảng nên mình có dùng Foreach để lấy ra từng ảnh một. Đây là đoạn dành riêng để lấy ảnh:

Bạn cũng có thể xem, full code phần lưu này trong file controller của mình:

Giải thích code:

  • Lệnh câu lệnh if/else để kiểm tra xem có ảnh hay không, nếu không thay bằng ảnh “noimage.png”
  • $fileNameToStore là tên file cần lưu.
  • $image->storeAs(‘public/cover_images’, $fileNameToStore); là đoạn lệnh để lưu vào storage.

Ngoài ra Imageupload là Model nên chúng ta có lệnh lưu ảnh $image = new Imageupload vào database.

Chú ý: Ở phần storeAs để lưu vào storage kia, các bạn cần link file ảnh sang thư mục public, để có thể lấy và hiển thị được trên website. Chúng ta dùng lệnh sau để link từ storage sang public:

Và nếu bạn liên kết giống như file ProductController.php thì hãy thêm:

để có thể dùng được Model Imageupload.

4. Hiển thị ra ngoài trang

Ví dụ Show - Controller
Ví dụ Show – Controller

Trong Controller:

Và file blade:

Chỗ này mình muốn lấy nhiều ảnh khi lưu vào một bài Post. Do đó mới có lệnh kiểu where, để lấy tất cả những ảnh có id bài post đó. Phần file Blade mình hiện thị từng ảnh một trong list.

Kết

Okey, vậy là chúng ta đã vừa hoàn thành phần Upload nhiều ảnh trong Laravel, có thể nói vẫn còn một số yêu cầu khác như update lại ảnh, hay xóa. Nhưng mình nghĩ sau khi đã thực hiện được phần bên trên rồi thì những yêu cầu đó, các bạn có thể triển khai được tốt.

Hi vọng bài viết này có ích cho các bạn. Hãy để lại comment bên dưới, cho mình biết ý kiến của bạn nhé.

Leave a Reply

avatar
  Subscribe  
Notify of
%d bloggers like this: