Laravel 8: Загрузка изображения с предварительным просмотром

09/11/2021 21:30

В этом руководстве вы узнаете, как загрузить изображение с предварительным просмотром и проверкой в laravel 8. А также о том, как загрузить изображение в базу данных и каталог хранилища в laravel 8. И как проверить тип, размер и т. д. изображения на контроллере laravel с помощью правил проверки laravel.

Загрузка изображений с предварительным просмотром в laravel 8 - очень распространенная вещь и очень основное требование каждого приложения laravel.

Загрузка изображения Laravel 8 с предварительным просмотром

Выполните следующие шаги и загрузите изображение с предварительным просмотром в приложениях laravel 8 с помощью jquery:

Шаг 1 - Создание модели и миграция

На этом шаге снова откройте командную строку и запустите в ней следующую команду, чтобы создать модель и файл миграции для формы:

php artisan make:model Photo -m

После этого откройте файл create_photos_table.php в каталоге LaravelImage/database/migrations/ и обновите функцию up() следующим кодом:

public function up()
{
    Schema::create('photos', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

Затем снова откройте командную строку и выполните следующую команду для создания таблиц в базе данных:

php artisan migrate

Шаг 2 - Создайте маршруты

На этом этапе откройте файл web.php из директории routes и обновите следующие маршруты в файле web.php:

use App\Http\Controllers\ImageUploadController;
 
Route::get('image-upload-preview', [ImageUploadController::class, 'index']);
Route::post('upload-image', [ImageUploadController::class, 'store']);

Шаг 3 - Создайте контроллер командой Artisan

На этом этапе выполните следующую команду в командной строке, чтобы создать файл контроллера:

php artisan make:controller ImageUploadController

После этого перейдите в app/http/controllers и откройте файл ImageUploadController.php и обновите в нем следующий код:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Photo;
 
class ImageUploadController extends Controller
{
     public function index()
    {
        return view('image-upload');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
 
        ]);
 
        $name = $request->file('image')->getClientOriginalName();
 
        $path = $request->file('image')->store('public/images');
 
 
        $save = new Photo;
 
        $save->name = $name;
        $save->path = $path;
 
        return redirect('image-upload-preview')->with('status', 'Изображение было успешно загружено');
 
    }
}

Следующая строка кода загрузит изображение в каталог images:

$path = $request->file('image')->store('public/images');

Шаг 4 - Создайте Blade View

Теперь создайте форму загрузки изображения в файле представления, чтобы отобразить форму загрузки изображения и отправить ее в базу данных.

Итак, перейдите к resources/views и создайте image-upload.blade.php и обновите в нем следующий код:

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 8 Image Upload With Preview - MakeCodes.ru</title>
 
  <meta name="csrf-token" content="{{ csrf_token() }}">
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
 
</head>
<body>
 
<div class="container mt-4">
 
  <h2 class="text-center">Image Upload with Preview using in Laravel 8 - MakeCodes.ru</h2>
 
      <form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('upload-image') }}" >
                 
          <div class="row">
 
              <div class="col-md-12">
                  <div class="form-group">
                      <input type="file" name="image" placeholder="Выбрать изображение" id="image">
                        @error('image')
                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                        @enderror
                  </div>
              </div>
 
              <div class="col-md-12 mb-2">
                  <img id="preview-image-before-upload" src="/images/product_image_not_found.gif"
                      alt="preview image" style="max-height: 250px;">
              </div>
                 
              <div class="col-md-12">
                  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
              </div>
          </div>     
      </form>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
<script type="text/jаvascript">
      
$(document).ready(function (e) {
 
   
   $('#image').change(function(){
            
    let reader = new FileReader();
 
    reader.onload = (e) => { 
 
      $('#preview-image-before-upload').attr('src', e.target.result); 
    }
 
    reader.readAsDataURL(this.files[0]); 
   
   });
   
});
 
</script>
</div>  
</body>
</html>

Следующий ниже код отобразит сообщение об ошибке проверки в файле представления:

@error('image')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror

Шаг 5 - Внедрите код jаvascript для предварительного просмотра изображения.

На этом этапе реализуйте код jаvascript, чтобы отобразить предварительный просмотр изображения перед загрузкой в базу данных и папку хранения.

Мы уже реализовали этот код, поэтому вы можете добавить этот код в файл представления:

<script type="text/jаvascript">
      
$(document).ready(function (e) {
 
   
   $('#image').change(function(){
            
    let reader = new FileReader();
 
    reader.onload = (e) => { 
 
      $('#preview-image-before-upload').attr('src', e.target.result); 
    }
 
    reader.readAsDataURL(this.files[0]); 
   
   });
   
});
 
</script>

Шаг 6 - Создайте каталог изображений внутри Storage/app/public

Теперь создайте каталог изображений в каталоге storage/app/public. Следующая строка кода загрузит изображение в каталог images, который находится внутри каталога storage/app/public/:

$path = $request->file('image')->store('public/images');

Шаг 7 - Запустите сервер разработки

Последний шаг, откройте командную строку и выполните следующую команду, чтобы запустить сервер разработки:

php artisan serve

Затем откройте в браузере следующий URL: http://127.0.0.1:8000/image-upload-preview

Laravel

1 + 0 -

MakeCodes
0
945