Загрузка изображений с помощью DropzoneJS

В этом уроке мы расскажем как, используя библиотеку DropzoneJS, загрузить одно или несколько изображений в Laravel.

Нам нужно будет выполнить следующие шаги:

Установка Laravel
Настройка базы данных в .env
Создание маршрутов
Генерация контроллера и модели
Создание шаблона
Запуск сервера

1. Установка Laravel

Прежде всего, нам нужно установить Laravel. Используем следующую команду:

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

2. Настройка базы данных в .env

В этом шаге перейдем в каталог проекта и откроем файл .env, чтобы ввести учетные данные для БД:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=databasename
DB_USERNAME=db_username
DB_PASSWORD=db_password

3. Создание маршрутов

Нам нужно создать два маршрута: первый показывает наш шаблон, а второй сохраняет изображения в базу данных. Вы можете скопировать нижеуказанные маршруты и вставить их в свой route/web.php:

Route::get('dropzone/image','ImageController@index');
Route::post('dropzone/store','ImageController@store');

4. Генерация контроллера и модели

В этом шаге мы создадим контроллер и модель, используя нижеприведенную команду в терминале:

php artisan make:model Image -mcr

Она создаст модель Image и контроллер ImageController.

Откройте ImageController.php и поместите в него следующие методы:

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Image;
 
class HomeController extends Controller
{
 
    public function index()
    {
        return view('image');
    }

    public function store(Request $request)
    {
        $image = $request->file('file');
        $avatarName = $image->getClientOriginalName();
        $image->move(public_path('images'),$avatarName);
         
        $imageUpload = new Image();
        $imageUpload->filename = $avatarName;
        $imageUpload->save();
        return response()->json(['success'=>$avatarName]);
    }
 
}

5. Создание шаблона

На этом этапе нам нужно создать blade-шаблон. Перейдите в app/resources/views и создайте файл image.blade.php:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laravel 6 Upload Image Using Dropzone Tutorial</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Laravel 6 Upload Image Using Dropzone Tutorial</h2><br/>
      <form method="post" action="{{url('dropzone/store')}}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
        @csrf
    </form>
    </div>
    <script type="text/javascript">
        Dropzone.options.dropzone =
        {
            maxFilesize: 10,
            renameFile: function (file) {
                var dt = new Date();
                var time = dt.getTime();
                return time + file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 60000,
            success: function (file, response) {
                console.log(response);
            },
            error: function (file, response) {
                return false;
            }
        };
    </script>
  </body>
</html>

В вышеприведенном файле нам необходимо включить скрипты и css от dropzone. Будем использовать CDN-версии файлов.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>

6. Запуск сервера

Запустим наш локальный сервер разработки. Используйте следующую команду:

php artisan serve

Теперь мы готовы запустить наш пример, выполните команду:

http://localhost:8000/image

или

http://localhost/laravelDropzone/public/image

В итоге все должно работать вот так:

Автор: Tuts Make
Перевод: Алексей Широков

Наш Телеграм-канал — следите за новостями о Laravel.