Хостинг-провайдер Timeweb – VDS, VPS, регистрация доменов.

Загрузка изображений в Laravel 6 по шагам

Загрузка изображений является основным требованием для всех проектов, поэтому я приведу простой пример загрузки изображений с помощью Laravel 6. Мы используем загрузку изображений в Laravel 6 с использованием фасада запроса. Мы будем загружать изображения с проверкой по типу изображения, mime-types, размер файла и т. д., таким образом можно защитить форму и маршруты от загрузки исполняемых скриптов на сервер.

В этом примере мы создадим два маршрута, один для метода GET, а другой для метода POST. Мы создадим простую форму для загрузки файла. Таким образом, вам нужно просто выбрать изображение, а затем оно будет загружено в каталог «images» общей папки.

Шаг 1: Установка Laravel 6
 
Прежде всего, нам нужно получить новое приложение Laravel 6, используя команду ниже. В этом примере мы устанавливаем приложение с нуля. Откройте командную строку терминала и/или выполните команду ниже:
 
composer create-project --prefer-dist laravel/laravel blog
 
Шаг 2. Создание маршрутов
 
На следующем шаге мы добавим два новых маршрута в файл web.php. Один маршрут для создания формы и другой для метода POST. Итак, давайте просто создадим оба маршрута, как показано ниже:


routes/web.php
Route::get('image-upload', 'ImageUploadController@imageUpload')->name('image.upload');
Route::post('image-upload', 'ImageUploadController@imageUploadPost')->name('image.upload.post');

На третьем шаге нам нужно будет создать новый ImageUploadController, и здесь мы должны добавить два метода imageUpload() и imageUploadPost(). Таким образом, один метод будет обрабатывать метод GET, другой — POST. Давайте добавим код.
<?php
   
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class ImageUploadController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUpload()
    {
        return view('imageUpload');
    }
  
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUploadPost(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
  
        $imageName = time().'.'.$request->image->extension();  
   
        $request->image->move(public_path('images'), $imageName);
   
        return back()
            ->with('success','You have successfully upload image.')
            ->with('image',$imageName);
   
    }
}

 
Шаг 3: Создаем шаблон Blade
 
На последнем шаге нам нужно создать файл imageUpload.blade.php, и в этом файле мы создадим форму с кнопкой для загрузки файла. Скопируйте ниже и поместите в этот файл.
 
<!DOCTYPE html>
<html>
<head>
    <title>laravel 6 image upload example — ItSolutionStuff.com.com</title>
    <link rel=«stylesheet» href=«getbootstrap.com/dist/css/bootstrap.css»>
</head>
  
<body>
<div class=«container»>
   
    <div class=«panel panel-primary»>
      <div class=«panel-heading»><h2>laravel 6 image upload example — ItSolutionStuff.com.com</h2></div>
      <div class=«panel-body»>
   
        @if ($message = Session::get('success'))
        <div class=«alert alert-success alert-block»>
            <button type=«button» class=«close» data-dismiss=«alert»>×</button>
                <strong>{{ $message }}</strong>
        </div>
        <img src=«images/{{ Session::get('image') }}»>
        @endif
  
        @if (count($errors) > 0)
            <div class=«alert alert-danger»>
                <strong>Whoops!</strong> There were some problems with your input.
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
  
        <form action="{{ route('image.upload.post') }}" method=«POST» enctype=«multipart/form-data»>
            @csrf
            <div class=«row»>
  
                <div class=«col-md-6»>
                    <input type=«file» name=«image» class=«form-control»>
                </div>
   
                <div class=«col-md-6»>
                    <button type=«submit» class=«btn btn-success»>Upload</button>
                </div>
   
            </div>
        </form>
  
      </div>
    </div>
</div>
</body>
  
</html>


Шаг 4: Создайте каталог «images»
 
На последнем шаге нам нужно создать новый каталог «images» с разрешениями на запись, поэтому давайте создадим новую папку в публичной папке.
 
После этого вы можете попробовать загрузить изображение.
 
Я надеюсь, что это помогло вам...

Нет комментариев