meta data for this page

Laravel

Téléverser des images

Créer un lien symbolique entre public/storage et storage/app/public pour que les images soient enregistrées dans le dossier storage/app/public

1
php artisan storage:link

Cette article explique bien le système de gestion des fichiers

Installation de la bibliothèque Php Intervention

Afin de manipuler les images plus facilement, on utilise la bibliothèque Php Intervention http://image.intervention.io/

1
composer require intervention/image

Voir la documentation pour l'installation dans Laravel

Configuration php.ini

Vérifier si cette ligne est décommentée extension=gd2

Configurer le dossier

Configurer le bon dossier pour enregistrer les images

config\filesystems.php
1
2
3
4
5
6
7
8
9
...
'default' => env('FILESYSTEM_DRIVER', 'local'),
...
 'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

Créer un input pour choisir une image

Au niveau du formulaire, il faut ajouter dans la balise form le type d'encodage (enctype=“multipart/form-data”) afin que le formulaire puisse envoyer le fichier au serveur.

1
2
3
4
<form action="{{ url("posts") }}"  method="POST" enctype="multipart/form-data">
...
<input type="file" id="image" name="image" required>
...

Fonction store() dans le contrôleur

Exemple d'un contrôleur ImageController.php avec une table de base de données qui a une colonne name pour enregistrer le nom de l'image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
use App\Image;
use Intervention\Image\Facades\Image as InterventionImage;
use Illuminate\Support\Facades\Storage;
 
...
 
public function store(Request $request)
    {
        $request->validate ([
            'image' => 'required|image|max:2000',
            'name' => 'nullable|string|max:255',
        ]);
 
        // Enregistre l'image originale dans le dossier '/storage/app/public/images'
        $path = basename ($request->image->store('images', 'public'));
 
        // Enregistre l'image réduite dans le dossier '/storage/app/public/thumbs'
        $image = InterventionImage::make($request->image)->widen(500)->encode();
        Storage::put('public/thumbs/' . $path, $image);
 
        // Sauvegarde dans la base de données
        $image = new Image;
        $image->name = $path;
        $request->images()->save($image);
 
        return back()->with('ok', __("L'image a bien été enregistrée"));
    }

  • Ligne 17, on utilise Intervention pour manipuler les images. widen(500) permet de redimensionner l'image avec une largeur de 500px

Voici d'autres options prises sur la documentation

1
2
3
4
5
6
7
8
9
10
11
12
13
// Ouvrir un fichier image
$img = Image::make('public/foo.jpg');
 
// Recadrer le meilleur rapport 5:3 (600x360) et redimensionner à 600x360 pixels
$img->fit(600, 360);
 
// Recadrer le meilleur rapport 1:1 (200x200) et redimensionner à 200x200 pixels
$img->fit(200);
 
// Ajouter une fonction de rappel pour conserver la taille maximale de l'image d'origine
$img->fit(800, 600, function ($constraint) {
    $constraint->upsize();
});