‫Sprecher: Im ersten Teil dieses
‫Abschnitts werden wir alles über das Hochladen
‫von Bildern mit dem Multer-Paket erfahren und in diesem
‫speziellen Video beginnen wir mit der Implementierung von Bild-Uploads für Benutzerfotos.
‫Aber bevor wir anfangen, lasst uns hier kurz
‫aufräumen und diese ständige Ausgabe der Cookies, die
‫wir hier haben, loswerden.
‫Das ist also irgendwo hier unten und das ist viel besser.
‫Jetzt werden wir daran arbeiten, Benutzerfotos hochzuladen
‫und lassen Sie uns hier die Benutzerrouten öffnen, in Ordnung.
‫Multer ist also eine sehr beliebte Middleware für die Verarbeitung
‫mehrteiliger Formulardaten, bei denen es sich um ein Formular in der Codierung handelt, das
‫zum Hochladen von Dateien aus einem Formular verwendet wird.
‫Denken Sie also daran, wie wir im
‫letzten Abschnitt ein URL-codiertes Formular verwendet haben, um Benutzerdaten zu aktualisieren,
‫und dafür mussten wir auch eine spezielle Middleware einbinden.
‫Multer ist also im
‫Grunde eine Middleware für mehrteilige Formulardaten.
‫Und jetzt werden wir Folgendes tun.
‫Wir werden es dem Benutzer ermöglichen,
‫ein Foto auf der Update
‫Me-Route hochzuladen, sodass Benutzer nicht nur E-Mail
‫und Foto aktualisieren können, sondern auch ihre Benutzerfotos hochladen können.
‫Beginnen wir also noch einmal damit,
‫das von uns benötigte Paket zu installieren und
‫hier tatsächlich ein neues Terminalfenster zu erstellen, und so installiert NPM Multer.
‫Alles klar und hier sehen wir, dass wir auf Multer 1 sind. 4. 1.
‫Falls Sie mit diesem Paket Probleme haben, stellen
‫Sie bitte sicher, dass Sie die
‫gleiche Version installieren, die ich hier verwende.
‫Gut.
‫Also, lass uns das hier aufnehmen.
‫Also Multer, verlangen, Multer.
‫Also, einfach und jetzt müssen wir einen sogenannten
‫Multer-Upload konfigurieren und dann verwenden.
‫Und lassen Sie uns das gleich hier
‫am Anfang machen und nennen wir es Upload und wir rufen die Multer-Funktion auf, die
‫wir gerade zuvor eingefügt haben, und übergeben dann
‫ein Objekt für einige Optionen.
‫Und im Moment ist die einzige
‫Option, die wir angeben werden,
‫das Ziel, und ich werde es auf Public/image/users setzen, in Ordnung.
‫Und das ist genau der
‫Ordner, in dem wir alle
‫hochgeladenen Bilder speichern möchten.
‫Das ist also hier, Öffentlich, Bild und Benutzer, wie zum Beispiel alle
‫Bilder für alle Benutzer, die
‫wir bereits in unserer Datenbank haben.
‫Richtig und natürlich können wir das viel komplexer
‫konfigurieren und das werden wir in unserem
‫nächsten Vortrag tun, aber
‫jetzt möchte ich wirklich, dass Sie dieses Paket nur
‫vorstellen und übrigens hätten wir eigentlich
‫einfach anrufen können die Multer-Funktion ohne irgendwelche Optionen drin.
‫Ohne dies würde also hier und da das hochgeladene
‫Bild einfach im Speicher abgelegt und nirgendwo auf
‫der Disc gespeichert, aber das ist an dieser Stelle natürlich nicht das,
‫was wir wollen und daher müssen wir zumindest diese Zieloption angeben.
‫Und damit wird unsere Datei dann
‫wirklich in ein Verzeichnis in unserem Dateisystem hochgeladen.
‫Und ich habe das schon erwähnt, aber
‫stellen wir einfach sicher, dass wir diesbezüglich auf der
‫gleichen Seite sind, was bedeutet, dass Bilder natürlich nicht
‫direkt in die Datenbank hochgeladen werden, wir laden sie
‫einfach in unser Dateisystem und dann in die Datenbank wir
‫Setzen Sie im Grunde einen Link zu diesem Bild.
‫In diesem Fall müssen wir also
‫in jedem Benutzerdokument alle hochgeladenen Dateien benennen, okay.
‫Das machen wir in diesem Video wieder nicht, aber
‫wir werden es etwas später tun.
‫Lassen Sie uns das jetzt einfach zum Laufen bringen.
‫Wie auch immer, was wir jetzt tun müssen,
‫ist, diesen Upload hier zu verwenden, um wirklich eine Middleware-Funktion zu
‫erstellen, die wir hier in die Update Me-Route einfügen können.
‫Also hier, und es funktioniert so.
‫Also Upload, Punkt Single, und es ist Single, weil wir hier
‫nur ein einzelnes Bild aktualisieren möchten und dann hier
‫in Single den Namen des Felds übergeben, das
‫das hochzuladende Bild enthalten wird.
‫Und das wird ein Foto sein, okay.
‫Und mit Feld meine ich das Feld
‫im Formular, in das das Bild hochgeladen wird.
‫Alles klar, macht es Sinn?
‫Also haben wir wieder das Multer-Paket eingefügt
‫und dann einen Upload erstellt.
‫Und dieser Upload dient nur dazu, ein paar Einstellungen
‫zu definieren, wobei wir in diesem Beispiel nur das Ziel definieren und
‫dann diesen Upload verwenden, um eine neue Middleware zu erstellen, die
‫wir dann zu diesem Stapel der Route hinzufügen können, die
‫wir zum Hochladen der Datei verwenden möchten .
‫Dafür sagen wir Upload Dot Single, weil wir
‫nur eine einzelne Datei haben
‫und dann geben wir schließlich den Namen des
‫Feldes an, das diese Datei enthalten soll.
‫Okay, und diese Middleware kümmert sich dann darum, die
‫Datei zu übernehmen und sie im Wesentlichen an das
‫von uns angegebene Ziel zu kopieren.
‫Und danach ruft es natürlich die
‫nächste Middleware im Stack auf, die Update Me ist.
‫Außerdem wird diese Middleware hier die Datei oder zumindest
‫einige Informationen über die Datei
‫auf dem Anfrageobjekt ablegen, also sehen
‫wir uns das einmal genauer an.
‫Gehen wir also zur Funktion Update Me.
‫Also genau hier und gleich
‫hier am Anfang sagen wir Konsolenpunktprotokoll, Regpunktdatei.
‫Gut?
‫Und auch ich möchte einen Blick auf den Körper werfen.
‫Großartig und damit sind wir nun tatsächlich
‫bereit, dies zu testen und werden es vorerst in postman testen,
‫aber natürlich werden wir diese
‫Funktionalität später auch in das Formular einfügen, in Ordnung.
‫Gehen wir also zum Postboten hier und zu Update Me.
‫Also im Grunde um den aktuellen Benutzer zu aktualisieren.
‫Und der Benutzer, den ich aktualisieren möchte, heißt
‫Leo, also holen wir ihn von Compass hierher, oder
‫eigentlich denke ich, dass das nicht einmal notwendig
‫ist, da wir in unserem Login bereits eine solche E-Mail-Adresse haben
‫und seine E-Mail leo@example ist. com und
‫das Passwort ist immer gleich.
‫Und so müssen wir uns natürlich zuerst als Benutzer einloggen und
‫nun gehen wir weiter und aktualisieren dann auf den Benutzer.
‫Im Körper haben wir also den Namen und die Rolle.
‫Also lass uns nur aktualisieren, sagen wir hier den Namen.
‫Der aktuelle Name ist also Leo Gillespie oder Gillespie, ich weiß nicht, wie
‫ich das sagen soll.
‫Lass uns hier in der Mitte einfach etwas hinzufügen, okay.
‫Und jetzt geben wir endlich die Fotoeigenschaft
‫an, oder eigentlich sollten wir es
‫nicht so machen, sondern hier zu Formulardaten gehen, okay, denn
‫so können
‫wir mehrteilige Formulardaten senden, ok.
‫Kopieren wir also nur den Namen hier und es ist Name.
‫In Ordnung, hier ist der Schlüssel Name
‫und dann dieser Wert.
‫Als nächstes legen wir dann endlich das Fotofeld fest und dann
‫können wir hier eigentlich angeben, was wir wollen.
‫Anstelle von Text, der die Standardeinstellung ist,
‫können wir eine Datei angeben und dann hier die Datei auswählen,
‫die wir hochladen möchten.
‫Also diese Datei, dieses Bild, ist hier wieder in unseren Def-Daten, dann im
‫Bild und dann hier das Bild von Leo.
‫Und deshalb wird dieser Benutzer angezeigt.
‫Okay, klicken Sie auf "Öffnen" und ich denke, wir
‫können diese Anfrage jetzt senden.
‫Alles klar, wir waren erfolgreich und natürlich wurde das Foto wie
‫gesagt natürlich nicht hier in der Datenbankausgabe aktualisiert, weil
‫das für die nächste Vorlesung ist.
‫Im Moment möchten wir dieses Bild nur wirklich in
‫den von uns angegebenen Ordner hochladen.
‫In Ordnung, werfen wir jetzt auch einen Blick auf unsere
‫Ausgabe und hier haben wir eine Request-Dot-Datei, die diese ist,
‫und erhalten so alle möglichen Informationen darüber.
‫Also der ursprüngliche Name, das von uns angegebene Ziel, der
‫neue Dateiname hier und auch die Größe.
‫Okay, das ist also eine Punktdatei anfordern und dann denken Sie daran, dass
‫wir auch den Körper protokolliert haben.
‫Und so ist der Körper jetzt nur noch der Name, in Ordnung.
‫Unser Body-Parse ist also nicht wirklich in der Lage, mit
‫Dateien umzugehen, und deshalb wird die Datei
‫überhaupt nicht im Body angezeigt und
‫das ist natürlich der ganze Grund, warum wir das Multer-Paket tatsächlich brauchen.
‫Wie auch immer, lass uns jetzt einen Blick in unseren Ordner
‫werfen und hier haben wir also Bild, Benutzer und dann irgendwo hier sollte das Bild
‫sein, das wir gerade hochgeladen haben, aber ich
‫kann es hier nicht wirklich sehen.
‫Lassen Sie uns aktualisieren, ah und hier ist es tatsächlich.
‫Wenn wir also jetzt darauf klicken, können wir es nicht
‫wirklich sehen, denn wie Sie hier
‫sehen können, hat es nicht einmal eine Erweiterung, okay.
‫Deshalb können wir es an dieser Stelle nicht wirklich öffnen.
‫Die Datei ist also wirklich hier in unserem Ordner
‫aufgetaucht und der Upload funktioniert tatsächlich.
‫Nun, zumindest irgendwie, aber wir sind nicht wirklich
‫dort, wo wir es wollen, richtig.
‫Also wollen wir ihm einen besseren Dateinamen geben und
‫wir wollen auch diesen Code, den
‫wir an dieser Stelle haben, ein wenig umorganisieren.
‫Und das machen wir im nächsten Video.