{"id":24902,"date":"2021-05-27T12:31:00","date_gmt":"2021-05-27T09:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24902"},"modified":"2021-10-18T02:38:40","modified_gmt":"2021-10-17T23:38:40","slug":"laden-sie-mehrere-bilder-in-laravel-hoch-und-aendern-sie-die-groesse","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/laden-sie-mehrere-bilder-in-laravel-hoch-und-aendern-sie-die-groesse\/","title":{"rendered":"Laden Sie mehrere Bilder in Laravel hoch und \u00e4ndern Sie die Gr\u00f6\u00dfe"},"content":{"rendered":"

Neben diesem Blog betreibe ich einen YouTube-Kanal, auf<\/a> dem ich die Video-Tutorials teile. K\u00fcrzlich fragte einer der Abonnenten des YouTube-Kanals nach der Gr\u00f6\u00dfen\u00e4nderung mehrerer Bilder in Laravel. Sie m\u00f6chten die Gr\u00f6\u00dfe mehrerer Bilder auf einmal \u00e4ndern. In diesem Artikel untersuchen wir, wie Sie mehrere Bilder in Laravel hochladen und ihre Gr\u00f6\u00dfe \u00e4ndern.<\/p>\n

Intervention Image<\/a> ist eine Open-Source-Bibliothek, die es uns erm\u00f6glicht, Bilder zu manipulieren. Ich werde diese Bibliothek verwenden, um die Gr\u00f6\u00dfe von Bildern zu \u00e4ndern.<\/p>\n

\"Laden<\/a><\/p>\n

Einstieg<\/h3>\n

Um unser Ziel zu erreichen, m\u00fcssen Sie die Intervention Image-Bibliothek im Laravel-Projekt installieren und konfigurieren. \u00d6ffnen Sie das Terminal in Ihrem Projekt-Root-Verzeichnis und f\u00fchren Sie den Befehl aus:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Sobald die Bibliothek installiert ist, \u00f6ffnen Sie die config\/app.php<\/code>Datei und f\u00fcgen Sie Dienstanbieter und Fassade hinzu. F\u00fcgen Sie dem $providers<\/code>Array die Dienstanbieter f\u00fcr dieses Paket hinzu .<\/p>\n
InterventionImageImageServiceProvider::class,<\/code><\/pre>\n
F\u00fcgen Sie die Fassade zum $aliases<\/code>Array hinzu.<\/p>\n
'Image' => InterventionImageFacadesImage::class,<\/code><\/pre>\n
Als n\u00e4chstes ben\u00f6tigen wir ein Verzeichnis, in dem wir unsere hochgeladenen Dateien speichern. Laravel Filesystem<\/a> bietet eine \u00f6ffentliche Festplatte zum Speichern der Dateien. Die \u00f6ffentliche Platte enth\u00e4lt Dateien, die \u00f6ffentlich zug\u00e4nglich sind. Sie finden die hochgeladenen Dateien im storage\/app\/public<\/code>Ordner. Um auf diese Dateien im Web zuzugreifen, m\u00fcssen Sie einen symbolischen Link von public\/storage<\/code>zu erstellen storage\/app\/public<\/code>.<\/p>\n
Erstellen Sie einen symbolischen Link mit dem Befehl:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Dieser Befehl w\u00fcrde einen Speicherordner unter dem \u00f6ffentlichen Verzeichnis erstellen. Hier speichern wir unsere Dateien.<\/p>\n
Bilder in Laravel hochladen und skalieren<\/h3>\n
Um Dateien auf einen Server hochzuladen, ben\u00f6tigen Sie ein Formular. Lassen Sie uns ein Formular erstellen, in dem Sie mehrere Dateien zum Hochladen auf einen Server ausw\u00e4hlen k\u00f6nnen. Unten finden Sie einen Beispielcode des Formulars, das in Ihre Ansichtsdatei eingef\u00fcgt wird.<\/p>\n
<form action=\"{{ url('ROUTE HERE') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image[]\" id=\"exampleInputFile\" multiple \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\n
Im Formular habe ich einen Dateieingabenamen als ‚profile_image[]‘ verwendet, der ein Array von Dateien an den Server sendet. Au\u00dferdem habe ich ein Attribut ‚multiple‘ hinzugef\u00fcgt, mit dem wir mehrere Dateien ausw\u00e4hlen k\u00f6nnen. Ersetzen Sie den Platzhalter ROUTE_URL durch Ihren tats\u00e4chlichen Wert.<\/p>\n
Da wir die Bilder hochladen und ihre Gr\u00f6\u00dfe \u00e4ndern m\u00fcssen, f\u00fcgen Sie im Controller wie folgt zwei Fassaden hinzu.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image; \/\/Intervention Image\nuse IlluminateSupportFacadesStorage; \/\/Laravel Filesystem\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\n}<\/code><\/pre>\n
Durch Hinzuf\u00fcgen der Fassade k\u00f6nnen Sie Gr\u00f6\u00dfen\u00e4nderungsfunktionen 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 \u00e4ndern dann die Gr\u00f6\u00dfe.<\/p>\n
public function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if ($request->hasFile('profile_image')) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach($request->file('profile_image') as $file){\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $file->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $file->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.uniqid().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Storage::put('public\/profile_images\/'. $filenametostore, fopen($file, 'r+'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Storage::put('public\/profile_images\/thumbnail\/'. $filenametostore, fopen($file, 'r+'));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Resize image here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($thumbnailpath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_URL')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Hier \u00e4ndern wir die Gr\u00f6\u00dfe des Bildes proportional. Dabei behalten wir das Seitenverh\u00e4ltnis bei und das Bild wird nicht abgeschnitten. Ich \u00fcbergebe Breite als 400 und H\u00f6he als 150. Sie k\u00f6nnen diese Werte nach Ihren W\u00fcnschen \u00e4ndern.<\/p>\n
Fahren Sie fort und testen Sie es. Sie erhalten die Gr\u00f6\u00dfen\u00e4nderungsversion der hochgeladenen Bilder im Verzeichnis ’storage\/profile_images\/thumbnail‘.<\/p>\n
Wenn Sie nach einer harten Ernte suchen, ersetzen Sie die folgenden Zeilen<\/p>\n
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($thumbnailpath);<\/code><\/pre>\n
Mit<\/p>\n
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);<\/code><\/pre>\n
Ich hoffe, Sie verstehen, wie Sie mehrere Bilder in Laravel hochladen und deren Gr\u00f6\u00dfe \u00e4ndern. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n