Cách thêm hình ảnh trong laravel 8

Trong blog này, tôi sẽ giải thích cho bạn cách tạo Image Upload trong laravel 8. Chúng tôi sẽ hiển thị ví dụ về tải lên hình ảnh trong laravel 8. bạn có thể dễ dàng tạo

Tải lên hình ảnh trong laravel 8 Tôi sẽ chỉ cho bạn về tải lên hình ảnh trong laravel 8. ví dụ này sẽ giúp bạn tải hình ảnh lên cơ sở dữ liệu laravel 8. Bài viết này đi chi tiết về cách tải lên và hiển thị hình ảnh trong laravel 8. Ở đây, Tạo một ví dụ cơ bản về tải lên hình ảnh laravel 8 với bản xem trước

Tôi đã tạo biểu mẫu đơn giản với đầu vào tệp. Vì vậy, bạn phải chọn hình ảnh đơn giản và sau đó nó sẽ tải lên trong thư mục "hình ảnh" của thư mục chung. Vì vậy, bạn chỉ cần làm theo bước dưới đây và tải lên hình ảnh trong ứng dụng laravel 8

Ở đây, tôi sẽ cung cấp cho bạn ví dụ đầy đủ về Tải lên hình ảnh đơn giản bằng Laravel 8 như dưới đây

Bước 1. Cài đặt ứng dụng Laravel 8

chúng tôi đang làm lại từ đầu, vì vậy chúng tôi yêu cầu tải ứng dụng Laravel mới bằng cách sử dụng lệnh dưới đây, vì vậy hãy mở terminal OR dấu nhắc lệnh của bạn và chạy lệnh dưới đây

composer create-project --prefer-dist laravel/laravel blog

Bước 2. Tạo tuyến đường

Trong bước tiếp theo, chúng tôi sẽ thêm hai tuyến đường mới trong web. tập tin php. Một tuyến để tạo biểu mẫu và một tuyến khác cho phương thức đăng Vì vậy, hãy chỉ cần tạo cả hai tuyến như được liệt kê dưới đây

Route::get['/image-upload', [UploadImageController::class, 'index']]->name['image.upload.index'];
Route::post['/image-upload/store', [UploadImageController::class, 'store']]->name['image.upload.store']

Bước 3. Tạo bộ điều khiển

Ở đây, bước này bây giờ chúng ta nên tạo bộ điều khiển mới dưới dạng UploadImageController, vì vậy hãy chạy lệnh dưới đây để tạo bộ điều khiển mới

php artisan make:controller UploadImageController

Ở bước cuối cùng, chúng ta cần tạo imageUpload. lưỡi. php và trong tệp này, chúng tôi sẽ tạo biểu mẫu với nút nhập tệp. Vì vậy, sao chép dưới đây và đưa vào tập tin đó

Với Laravel, bạn có thể quên đi việc phải lo lắng về biến 'Tệp' SuperGlobal của PHP. Không còn phải loay hoay với các dòng và dòng mã để xử lý các tệp tải lên đơn giản. Quy trình tải lên của Laravel cho phép tải lên tệp thông qua gửi biểu mẫu không chỉ dễ làm việc mà dường như hoạt động hoàn hảo ngay từ đầu

Trong bài viết này, chúng ta sẽ thực hiện các bước về cách tải tệp lên từ giao diện người dùng thông qua biểu mẫu HTML. Lưu trữ tệp trong thư mục dự án và cũng lưu đường dẫn nguồn hình ảnh trong cơ sở dữ liệu

Ghi chú bên lề. Hướng dẫn này sẽ hoạt động với Laravel phiên bản 5, 6, 7 và 8. Khi cú pháp khác nhau giữa các phiên bản, cú pháp khác nhau sẽ được thể hiện

điều kiện tiên quyết

Hướng dẫn này giả định rằng bạn đã thiết lập môi trường Laravel được cấu hình với cơ sở dữ liệu

Hãy bắt đầu nào

Đầu tiên và quan trọng nhất, chúng ta sẽ cần thiết lập một bảng mới trong cơ sở dữ liệu sẽ chứa thông tin cùng với đường dẫn nguồn của hình ảnh đã tải lên

Bước 1 – Tạo mô hình

Hãy bắt đầu ngay và tải bảng điều khiển tại thư mục gốc của dự án

Nhấn vào lệnh sau –

Route::get['/image-upload', [UploadImageController::class, 'index']]->name['image.upload.index'];
Route::post['/image-upload/store', [UploadImageController::class, 'store']]->name['image.upload.store']

4

Thao tác này sẽ tạo một tệp mới trong thư mục Ứng dụng/ của bạn nếu bạn đang sử dụng Laravel 6 hoặc 7 và Ứng dụng/Mô hình nếu bạn đang sử dụng Laravel 8

Bước 2 – Tạo chuyển đổi mô hình

Một lần nữa, quay lại bàn điều khiển và nhập lệnh sau

Route::get['/image-upload', [UploadImageController::class, 'index']]->name['image.upload.index'];
Route::post['/image-upload/store', [UploadImageController::class, 'store']]->name['image.upload.store']

5

Thao tác này sẽ thêm tệp di chuyển mới vào thư mục cơ sở dữ liệu/di chuyển của dự án

Bước 2. 1

Chỉnh sửa hàm

Route::get['/image-upload', [UploadImageController::class, 'index']]->name['image.upload.index'];
Route::post['/image-upload/store', [UploadImageController::class, 'store']]->name['image.upload.store']

6 để khớp với phần sau –

public function up[]
    {
        Schema::create['products', function [Blueprint $table] {
            $table->id[];
            $table->string['name'];
            $table->string['file_path'];
            $table->timestamps[];
        }];
    }

Lưu tệp và chuẩn bị di chuyển

Bước 3 – Chạy di chuyển

Bạn sẽ đoán ra rồi, quay lại bàn điều khiển và chạy lệnh sau -

Route::get['/image-upload', [UploadImageController::class, 'index']]->name['image.upload.index'];
Route::post['/image-upload/store', [UploadImageController::class, 'store']]->name['image.upload.store']

7

Sau khi điều này được thực thi, bạn sẽ thấy một số loại phản hồi trong bảng điều khiển như thế này -

protected $fillable = ["name", "file_path", "created_at", "updated_at"];

0

Bước 4 – Cấu hình mô hình

Tiếp theo, đã đến lúc nhập mã, hãy tìm Sản phẩm. php tệp mô hình trong thư mục Ứng dụng/ nếu bạn đang sử dụng Laravel 6 hoặc 7 và Ứng dụng/Mô hình nếu bạn đang sử dụng Laravel 8

Thêm thuộc tính có thể điền vào lớp mô hình để đảm bảo khi chúng tôi gửi dữ liệu từ biểu mẫu, mô hình được định cấu hình để chấp nhận dữ liệu cho các trường đã chỉ định

protected $fillable = ["name", "file_path", "created_at", "updated_at"];

Bước 5 – Tạo bộ điều khiển tháo vát

Quay lại bàn điều khiển và tạo bộ điều khiển mới bằng cách thực hiện lệnh sau –

protected $fillable = ["name", "file_path", "created_at", "updated_at"];

1

Bước 6 – Định cấu hình các tuyến đường

Để đơn giản, chúng tôi sẽ định cấu hình một tuyến đường tháo vát để phù hợp với bộ điều khiển tháo vát. Mặc dù chúng tôi sẽ không sử dụng nhiều tuyến đường, nhưng một số tuyến đường sẽ rất quan trọng để tải lên hình ảnh và lưu trữ thông tin trong cơ sở dữ liệu

Các tuyến mà chúng tôi sẽ sử dụng cụ thể là các tuyến tạo và lưu trữ

Thêm một trong những điều sau vào tuyến đường/web của bạn. php tùy thuộc vào phiên bản của bạn –

Route::resource['products', 'WebControllers\ProductController']; // Laravel 5,6,7

// OR
Route::resource['products', 'App\Http\Controllers\ProductController']; // Laravel 8

Bước 7 – Tạo chế độ xem tạo

Bây giờ chúng tôi có tất cả các nền tảng được định cấu hình để tải lên một hình ảnh, lưu trữ nó trong cơ sở dữ liệu và trong thư mục tệp, chúng tôi có thể tập trung vào một số mã hóa. Nhưng trước tiên, hãy tạo chế độ xem –

1. Tạo một thư mục mới trong thư mục tài nguyên/lượt xem có tên là sản phẩm
2. Tạo một tệp mới bên trong thư mục tài nguyên/lượt xem/sản phẩm có tên tạo. lưỡi. php

Ghi chú. Nếu bạn đã định cấu hình bố cục, hãy thêm chúng vào tệp dạng xem mới này, nếu không, bạn có thể sử dụng mã sau đây sẽ là một mẫu HTML đơn giản có biểu mẫu

Bước 7. 1 – Thêm cú pháp HTML & Blade

Add the following code to your blade, or simply use the block to add to your own layout templates.

Ghi chú. Đảm bảo có

protected $fillable = ["name", "file_path", "created_at", "updated_at"];

2 nếu không tệp sẽ không được chuyển chính xác

    
    

    Laravel

    
    

    
        body {
            font-family: 'Nunito';
        }
    



@if [$errors->any[]]
   

     

     @foreach [$errors->all[] as $error]
        
{{ $error }}
     @endforeach
     
   
@endif




        
        @csrf
    

        Product Name
        
    
    

        
    
    Submit

Bước 8 – Định cấu hình chức năng tạo bộ điều khiển sản phẩm

Tiếp theo, chúng ta cần định cấu hình chức năng tạo của Bộ điều khiển sản phẩm để trả về chế độ xem tạo mới được tạo

Hãy tiếp tục và tìm bộ điều khiển mà chúng tôi đã tạo bằng php artisan trước đó. Nó sẽ nằm trong thư mục App/Http/Controllers

Mở nó lên và thêm đoạn mã sau vào hàm

protected $fillable = ["name", "file_path", "created_at", "updated_at"];

3

Route::get['/image-upload', [UploadImageController::class, 'index']]->name['image.upload.index'];
Route::post['/image-upload/store', [UploadImageController::class, 'store']]->name['image.upload.store']

1

Bước 9 – Kiểm tra kết xuất chế độ xem tạo

Bây giờ để kiểm tra xem những gì chúng tôi đã làm cho đến nay với tuyến đường, bộ điều khiển và chế độ xem có thực sự hoạt động không. Mở trình duyệt và điều hướng đến

http. // localhost/sản phẩm/tạo

Hoặc

http. //your_url/products/create

Điều này, đối với tôi, hiển thị một trang trống, rất cơ bản với một biểu mẫu, giống như bên dưới –

Hoàn hảo

Bước 10 – Định cấu hình chức năng lưu trữ bộ điều khiển sản phẩm

Bây giờ đối với nội dung lớn, chúng tôi cần bộ điều khiển cửa hàng để xử lý việc gửi biểu mẫu từ chế độ xem tạo. Không chỉ điều này, chúng tôi cần nó để xử lý tệp, có thể lưu trữ tệp cục bộ và ngoài ra, lưu trữ đường dẫn tệp trong cơ sở dữ liệu cùng với tên sản phẩm

Vì vậy, hãy quay lại ProductController và tìm hàm

protected $fillable = ["name", "file_path", "created_at", "updated_at"];

4 và cấu trúc lại nó để trông giống như sau, lưu ý các ghi chú mã được đặt ở mỗi giai đoạn

Route::get['/image-upload', [UploadImageController::class, 'index']]->name['image.upload.index'];
Route::post['/image-upload/store', [UploadImageController::class, 'store']]->name['image.upload.store']

3

Bước 11 – Đã đến lúc dùng thử

Bây giờ tất cả mã hóa đã hoàn tất, điều cuối cùng cần làm là kiểm tra nó, tìm một hình ảnh bạn muốn tải lên và chuyển đến chế độ xem tạo trong trình duyệt

Tôi sẽ tải lên một sản phẩm có tên là Cà phê, với hình ảnh một túi cà phê. [Làm thế nào nhà phát triển ban đầu]

Nhập tên và tìm hình ảnh bạn muốn tải lên và nhấn nút gửi. Cách bộ điều khiển hiện được cấu hình, nó sẽ hiển thị trở lại chế độ xem tạo. Vì vậy, hãy xem những gì nó đạt được

Bản ghi trong cơ sở dữ liệu

 

Các tập tin trong thư mục dự án

 

Như bạn có thể thấy từ bản ghi được lưu và tệp trong thư mục dự án, nó có một tên mới, một cái tên khá độc đáo. Nó đổi tên tên hình ảnh gốc nhưng giữ lại mọi thứ khác. Ngoài ra, hình ảnh hiện đã được thêm vào thư mục ứng dụng/công khai/sản phẩm giúp nó có thể nhận dạng được để sử dụng với nhiều loại hình ảnh tiềm năng khác có thể được tải lên

Và đó là nó

Tóm lược

Trong bài viết này, chúng tôi đã thực hiện 11 bước để xử lý sự cố thông qua việc tải lên một hình ảnh trong Laravel, như bạn có thể thấy trong hướng dẫn này, nó cực kỳ dễ dàng so với việc tải lên một tệp có cú pháp PHP thô. Bạn không phải lo lắng về nhiều thứ và nó cũng sạch sẽ hơn rất nhiều với Laravel. Tôi hy vọng bài viết này đã giúp bạn với các trường hợp sử dụng tệp tải lên của mình. Cho đến lần sau

Làm cách nào để hiển thị hình ảnh trong laravel 8?

Làm cách nào để tải lên hình ảnh bằng laravel?

Làm cách nào để lưu trữ hình ảnh trong cơ sở dữ liệu bằng laravel 8?

Làm cách nào để tải lên và hiển thị hình ảnh trong laravel?