Laden Sie mehrere Bilder in Laravel hoch und ändern Sie die Größe

Last updated 18. Oktober 2021

Inhalt

Bilder in Laravel hochladen und skalieren

Neben diesem Blog betreibe ich einen YouTube-Kanal, auf dem ich die Video-Tutorials teile. Kürzlich fragte einer der Abonnenten des YouTube-Kanals nach der Größenänderung mehrerer Bilder in Laravel. Sie möchten die Größe mehrerer Bilder auf einmal ändern. In diesem Artikel untersuchen wir, wie Sie mehrere Bilder in Laravel hochladen und ihre Größe ändern.

Intervention Image ist eine Open-Source-Bibliothek, die es uns ermöglicht, Bilder zu manipulieren. Ich werde diese Bibliothek verwenden, um die Größe von Bildern zu ändern.

Einstieg

Um unser Ziel zu erreichen, müssen Sie die Intervention Image-Bibliothek im Laravel-Projekt installieren und konfigurieren. Öffnen Sie das Terminal in Ihrem Projekt-Root-Verzeichnis und führen Sie den Befehl aus:

composer require intervention/image

Sobald die Bibliothek installiert ist, öffnen Sie die config/app.phpDatei und fügen Sie Dienstanbieter und Fassade hinzu. Fügen Sie dem $providersArray die Dienstanbieter für dieses Paket hinzu .

InterventionImageImageServiceProvider::class,

Fügen Sie die Fassade zum $aliasesArray hinzu.

'Image' => InterventionImageFacadesImage::class,

Als nächstes benötigen wir ein Verzeichnis, in dem wir unsere hochgeladenen Dateien speichern. Laravel Filesystem bietet eine öffentliche Festplatte zum Speichern der Dateien. Die öffentliche Platte enthält Dateien, die öffentlich zugänglich sind. Sie finden die hochgeladenen Dateien im storage/app/publicOrdner. Um auf diese Dateien im Web zuzugreifen, müssen Sie einen symbolischen Link von public/storagezu erstellen storage/app/public.

Erstellen Sie einen symbolischen Link mit dem Befehl:

php artisan storage:link

Dieser Befehl würde einen Speicherordner unter dem öffentlichen Verzeichnis erstellen. Hier speichern wir unsere Dateien.

Bilder in Laravel hochladen und skalieren

Um Dateien auf einen Server hochzuladen, benötigen Sie ein Formular. Lassen Sie uns ein Formular erstellen, in dem Sie mehrere Dateien zum Hochladen auf einen Server auswählen können. Unten finden Sie einen Beispielcode des Formulars, das in Ihre Ansichtsdatei eingefügt wird.

<form action="{{ url('ROUTE HERE') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image[]" id="exampleInputFile" multiple />
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Im Formular habe ich einen Dateieingabenamen als ‘profile_image[]’ verwendet, der ein Array von Dateien an den Server sendet. Außerdem habe ich ein Attribut ‘multiple’ hinzugefügt, mit dem wir mehrere Dateien auswählen können. Ersetzen Sie den Platzhalter ROUTE_URL durch Ihren tatsächlichen Wert.

Da wir die Bilder hochladen und ihre Größe ändern müssen, fügen Sie im Controller wie folgt zwei Fassaden hinzu.

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Image; //Intervention Image
use IlluminateSupportFacadesStorage; //Laravel Filesystem
 
class ImageController extends Controller
{
 
}

Durch Hinzufügen der Fassade können Sie Größenänderungsfunktionen der Interventionsbildbibliothek aufrufen. Im folgenden Code werde ich die Dateien an zwei Stellen hochladen. Eines ist das Originalbild. Der zweite befindet sich unter dem Miniaturansichtsverzeichnis. Wir laden zuerst das Originalbild in den Thumbnail-Ordner hoch und ändern dann die Größe.

public function store(Request $request)
{
    if ($request->hasFile('profile_image')) {
 
        foreach($request->file('profile_image') as $file){
 
            //get filename with extension
            $filenamewithextension = $file->getClientOriginalName();
 
            //get filename without extension
            $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
 
            //get file extension
            $extension = $file->getClientOriginalExtension();
 
            //filename to store
            $filenametostore = $filename.'_'.uniqid().'.'.$extension;
 
            Storage::put('public/profile_images/'. $filenametostore, fopen($file, 'r+'));
            Storage::put('public/profile_images/thumbnail/'. $filenametostore, fopen($file, 'r+'));
 
            //Resize image here
            $thumbnailpath = public_path('storage/profile_images/thumbnail/'.$filenametostore);
            $img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
                $constraint->aspectRatio();
            });
            $img->save($thumbnailpath);
        }
 
        return redirect('ROUTE_URL')->with('success', "Image uploaded successfully.");
    }
}

Hier ändern wir die Größe des Bildes proportional. Dabei behalten wir das Seitenverhältnis bei und das Bild wird nicht abgeschnitten. Ich übergebe Breite als 400 und Höhe als 150. Sie können diese Werte nach Ihren Wünschen ändern.

Fahren Sie fort und testen Sie es. Sie erhalten die Größenänderungsversion der hochgeladenen Bilder im Verzeichnis ‘storage/profile_images/thumbnail’.

Wenn Sie nach einer harten Ernte suchen, ersetzen Sie die folgenden Zeilen

$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
    $constraint->aspectRatio();
});
$img->save($thumbnailpath);

Mit

$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);

Ich hoffe, Sie verstehen, wie Sie mehrere Bilder in Laravel hochladen und deren Größe ändern. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net