Deutsch

Laravel-Anleitung

Laravel - Datei-Upload: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, ambitionierte Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt des Datei-Uploads in Laravel. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch diesen Prozess Schritt für Schritt zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir beginnen bei den Grundlagen und arbeiten uns hoch. Also hol dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und tauchen wir ein!

Laravel - File Uploading

Was ist Datei-Upload?

Bevor wir uns in den Code stürzen, lassen wir uns erstmal klarmachen, was Datei-Upload eigentlich bedeutet. Stell dir vor, du möchtest dein Lieblingsurlaubsfoto mit einem Freund online teilen. Der Prozess des Übertragens dieses Bildes von deinem Computer auf eine Website wird als "Datei-Upload" bezeichnet. In der Webentwicklung müssen wir oft Benutzern erlauben, verschiedene Arten von Dateien hochzuladen – Bilder, Dokumente, Videos, du kennst sie!

Warum Laravel für Datei-Uploads?

Laravel, unser bevorzugtes PHP-Framework, macht Datei-Uploads zum Kinderspiel. Es bietet einfache und elegante Methoden, um Datei-Uploads zu handhaben, und stellt sicher, dass deine Anwendung sicher und effizient mit von Benutzern eingereichten Dateien umgehen kann. Verlass dich darauf, nach dem Versuch von Datei-Uploads in anderen Frameworks wirst du die direkte Herangehensweise von Laravel zu schätzen wissen!

Einrichten unseres Projekts

Zunächst einmal, lassen wir ein neues Laravel-Projekt einrichten. Wenn du das noch nicht getan hast, öffne dein Terminal und führe aus:

composer create-project --prefer-dist laravel/laravel file-upload-demo

Dieser Befehl erstellt ein neues Laravel-Projekt namens "file-upload-demo". Wenn das erledigt ist, navigiere in dein Projektverzeichnis:

cd file-upload-demo

Erstellen unseres Datei-Upload-Formulars

Nun erstellen wir ein einfaches Formular, das Benutzern das Hochladen von Dateien ermöglicht. Wir beginnen mit der Erstellung einer neuen Blade-Vorlage. Erstelle eine neue Datei namens upload.blade.php im Verzeichnis resources/views und füge den folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
<title>Datei-Upload-Demo</title>
</head>
<body>
<h2>Eine Datei hochladen</h2>
<form action="{{ route('upload') }}" method="POST" enctype="multipart/form-data">
@csrf
<input type="file" name="file">
<button type="submit">Hochladen</button>
</form>
</body>
</html>

Lassen wir das einmal auseinandernehmen:

  1. Wir haben ein einfaches HTML-Formular erstellt.
  2. Das action-Attribut zeigt auf eine Route namens 'upload' (die wir gleich erstellen).
  3. Die method ist auf POST gesetzt, weil wir Daten an den Server senden.
  4. enctype="multipart/form-data" ist entscheidend für Datei-Uploads – es informiert den Browser, die Formulardaten in einem Format zu senden, das Dateien enthalten kann.
  5. @csrf ist eine Laravel-Direktive, die ein CSRF-Token hinzufügt, um Angriffe durch Cross-Site Request Forgery zu schützen.
  6. Wir haben ein Input-Feld vom Typ "file", das Benutzern ermöglicht, eine Datei von ihrem Gerät auszuwählen.

Einrichten der Route

Nun, wo wir unser Formular haben, müssen wir eine Route einrichten, um sowohl das Anzeigen des Formulars als auch die Verarbeitung des Uploads zu handhaben. Öffne routes/web.php und füge diese Zeilen hinzu:

use App\Http\Controllers\FileController;

Route::get('/', [FileController::class, 'showForm']);
Route::post('/upload', [FileController::class, 'upload'])->name('upload');

Hier definieren wir zwei Routen:

  1. Eine GET-Route für die Root-URL ('/') die unser Upload-Formular anzeigt.
  2. Eine POST-Route für '/upload', die den Datei-Upload-Prozess handhabt.

Erstellen des Controllers

Als nächstes müssen wir einen Controller erstellen, um diese Routen zu handhaben. Führe den folgenden Befehl in deinem Terminal aus:

php artisan make:controller FileController

Dies erstellt eine neue Controller-Datei. Öffne app/Http/Controllers/FileController.php und ersetze deren Inhalt mit:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileController extends Controller
{
public function showForm()
{
return view('upload');
}

public function upload(Request $request)
{
if ($request->hasFile('file')) {
$file = $request->file('file');
$path = $file->store('uploads');
return "Datei erfolgreich hochgeladen! Pfad: " . $path;
}
return "Keine Datei hochgeladen.";
}
}

Lassen wir das einmal auseinandernehmen, was im upload-Methoden passiert:

  1. Wir prüfen, ob tatsächlich eine Datei hochgeladen wurde, indem wir $request->hasFile('file') verwenden.
  2. Wenn eine Datei existiert, holen wir sie mit $request->file('file') ab.
  3. Wir verwenden Laravel's store-Methode, um die Datei im 'uploads'-Verzeichnis in unserem Speicherordner zu speichern.
  4. Schließlich geben wir eine Erfolgsmeldung mit dem Dateipfad zurück.

Testen unseres Datei-Uploads

Nun testen wir unsere Datei-Upload-Funktionalität:

  1. Starte deinen Laravel-Entwicklungsserver, indem du php artisan serve in deinem Terminal ausführst.
  2. Besuche http://localhost:8000 in deinem Browser.
  3. Du solltest unser erstelltes Upload-Formular sehen.
  4. Wähle eine Datei aus und klicke auf "Hochladen".
  5. Wenn alles korrekt funktioniert, solltest du eine Erfolgsmeldung mit dem Dateipfad sehen.

Handhabung verschiedener Dateitypen

In realen Anwendungen musst du oft verschiedene Dateitypen handhaben. Lassen wir unseren Controller accordingly anpassen:

public function upload(Request $request)
{
if ($request->hasFile('file')) {
$file = $request->file('file');
$extension = $file->getClientOriginalExtension();

$allowedExtensions = ['jpg', 'png', 'pdf', 'doc', 'docx'];

if (in_array($extension, $allowedExtensions)) {
$path = $file->store('uploads/' . $extension);
return "Datei erfolgreich hochgeladen! Pfad: " . $path;
} else {
return "Dateityp nicht erlaubt.";
}
}
return "Keine Datei hochgeladen.";
}

In dieser aktualisierten Version:

  1. Wir holen die Dateierweiterung mit getClientOriginalExtension() ab.
  2. Wir definieren eine Liste von erlaubten Dateitypen.
  3. Wir prüfen, ob die hochgeladene Datei eine Erweiterung aus unserer Liste hat.
  4. Wenn ja, speichern wir sie in einem Unterordner basierend auf ihrem Typ.
  5. Wenn nicht, geben wir eine Fehlermeldung zurück.

Anzeigen hochgeladener Bilder

Wenn du mit Bild-Uploads arbeitest, möchtest du diese vielleicht nach dem Upload anzeigen. Lassen wir unseren Controller accordingly anpassen:

public function upload(Request $request)
{
if ($request->hasFile('file')) {
$file = $request->file('file');
$extension = $file->getClientOriginalExtension();

if ($extension === 'jpg' || $extension === 'png') {
$path = $file->store('public/uploads');
$url = asset(Storage::url($path));
return view('image', ['url' => $url]);
} else {
return "Nur JPG- und PNG-Dateien sind zur Anzeige erlaubt.";
}
}
return "Keine Datei hochgeladen.";
}

Erstelle eine neue View-Datei resources/views/image.blade.php:

<!DOCTYPE html>
<html>
<head>
<title>Hochgeladenes Bild</title>
</head>
<body>
<h2>Dein hochgeladenes Bild:</h2>
<img src="{{ $url }}" alt="Hochgeladenes Bild" style="max-width: 500px;">
</body>
</html>

Nun siehst du das hochgeladene Bild auf der Seite, wenn du eines hochlädst!

Fazit

Glückwunsch! Du hast gerade die Grundlagen des Datei-Uploads in Laravel gelernt. Wir haben das Erstellen eines Formulars, das Handhaben von Datei-Uploads, das Speichern von Dateien und sogar das Anzeigen hochgeladener Bilder behandelt. Denke daran, Datei-Uploads sind eine mächtige Funktion, aber validiere und säubere deine Eingaben immer, um deine Anwendung sicher zu halten.

Als du deine Laravel-Reise fortsetzt, wirst du noch viele fortgeschrittene Dateihandhabungstechniken entdecken. Aber für jetzt, gönn dir selbst einen Applaus – du hast einen großen Schritt in deinem Webentwicklungsabenteuer gemacht!

Hier ist eine schnelle Referenztabelle der Methoden, die wir verwendet haben:

Methode Beschreibung
$request->hasFile('file') Prüft, ob eine Datei hochgeladen wurde
$request->file('file') Holt die hochgeladene Datei
$file->store('path') Speichert die Datei im angegebenen Pfad
$file->getClientOriginalExtension() Holt die ursprüngliche Dateierweiterung
Storage::url($path) Generiert eine URL für die gespeicherte Datei

Frohes Coden und möge deine Uploads stets erfolgreich sein!

Credits: Image by storyset

Vorheriges Tutorial:
Laravel - Validierung
Nächstes Tutorial:
Laravel - E-Mail senden