‫Jonas: Lassen Sie uns Multer jetzt tatsächlich nach unseren Bedürfnissen konfigurieren.
‫Zuerst geben Sie Bildern einen besseren Dateinamen,
‫dann dürfen nur Bilddateien auf
‫unseren Server hochgeladen werden.
‫Und um zu beginnen, lassen
‫Sie uns alle Multer-bezogenen
‫Dinge von diesem Router auf den Controller verschieben.
‫Also lass uns das
‫hier abschneiden und ich werde es gleich
‫hier am Ende platzieren, oder eigentlich ganz oben, in Ordnung?
‫Also alles, was mit Multer zu
‫tun hat, werden wir hier ganz oben platzieren.
‫Dann müssen wir natürlich auch dieses Multer-Paket importieren.
‫Und jetzt müssen wir damit auch eine Middleware erstellen.
‫Also Exporte. uploadUserPhoto wird
‫diesem gleich sein.
‫In Ordnung, wir haben also immer noch
‫eine Middleware-Funktion, aber jetzt hat sie einen eigenen, einfacher zu verwendenden Namen, in Ordnung?
‫Und hier also userController. UploadFoto, in Ordnung?
‫Das sieht also viel schöner
‫aus, und natürlich ist
‫es sinnvoll, dass dieser Code im Controller steckt.
‫Und so ist das jetzt
‫schön sauber und wir können es jetzt tatsächlich schließen.
‫Großartig, und jetzt können
‫wir unseren Multer-Upload nach unseren Bedürfnissen konfigurieren.
‫Und dafür werden wir einen Multer-Speicher und einen
‫Multer-Filter erstellen, in Ordnung?
‫Und dann werden wir diesen Speicher und den Filter
‫verwenden, um dann den Upload von dort aus zu erstellen, in Ordnung?
‫Also machen wir das hier.
‫Also einen MulterStorage, wir verwenden Multer. Festplattenspeicherplatz.
‫In Ordnung, und wir könnten uns
‫auch entscheiden, die Datei als Puffer im Speicher zu
‫speichern, damit wir sie später von anderen Prozessen verwenden können.
‫Und eigentlich werden wir das etwas später
‫tun, aber im Moment wollen wir die Datei
‫natürlich wirklich so speichern, wie sie in unserem Dateisystem ist, okay?
‫Für die Festplattenspeicherung nehmen wir also ein paar Optionen, und
‫die erste ist das Ziel.
‫Aber jetzt können wir es nicht einfach so auf diesen Pfad setzen, wie
‫wir es zuvor getan haben.
‫Nein, das ist etwas komplexer, in Ordnung?
‫Und so ist dieses Ziel hier wirklich eine Callback-Funktion,
‫die so funktioniert.
‫Diese Callback-Funktion hat also Zugriff auf die aktuelle Anfrage, auf
‫die aktuell hochgeladene Datei und
‫auch auf eine Callback-Funktion.
‫Und diese Callback-Funktion ist
‫ein bisschen wie die nächste Funktion in Express.
‫Aber ich nenne es hier cb, was für Rückruf
‫steht, damit es anders heißt
‫als next, denn eigentlich kommt es nicht von Express, okay?
‫Aber es ist insofern ähnlich, als wir hier Fehler und andere
‫Dinge einfügen können, wie Sie gleich sehen werden.
‫Um nun das Ziel
‫zu definieren, müssen wir diesen Rückruf tatsächlich aufrufen.
‫Also Rückruf, und dann ist das erste Argument ein
‫Fehler, falls vorhanden.
‫Und wenn nicht, dann einfach null.
‫Und das zweite Argument ist dann das eigentliche Ziel.
‫Also kopieren wir das
‫hier und fügen es hier ein.
‫Alles klar, und das sieht wieder alles etwas seltsam und komplex aus, und
‫werfen wir einen
‫Blick auf die Multer-Dokumentation auf GitHub.
‫Okay, und wenn Sie mehr
‫erfahren möchten, können Sie sich diese Dokumentation hier ansehen.
‫Und wie Sie sehen,
‫ist es mit 6.000 Sternen tatsächlich ein ziemlich beliebtes Paket.
‫Hier erfahren Sie also, wie Sie es verwenden.
‫Aber was Sie hier finden werden,
‫ist das, was wir
‫in den nächsten paar Vorlesungen machen werden, okay?
‫Das sieht also viel verwirrender aus als das,
‫was wir tun werden, in Ordnung?
‫Aber Sie sehen, dass
‫dies tatsächlich das ist, was wir derzeit tun, also legen wir das
‫Ziel fest und als nächstes werden wir auch den Dateinamen festlegen.
‫Lassen Sie uns das tun, und wenn Sie mehr erfahren möchten,
‫werfen Sie einfach einen Blick in diese Dokumentation.
‫Aber jetzt möchte ich jetzt die Dateiname-Eigenschaft festlegen.
‫Also nicht das, einfach Dateiname.
‫Und das ist wiederum eine sehr
‫ähnliche Callback-Funktion mit ähnlicher Signatur, Anfrage, Datei und Callback.
‫Und jetzt möchten wir unseren Dateien einige eindeutige Dateinamen geben.
‫Und das
‫mache ich, indem ich sie user-userid nenne – den aktuellen Zeitstempel.
‫Also ungefähr so: also Benutzer-, und
‫dann die ID, die so komisch ist, ungefähr so.
‫Richtig, und dann der aktuelle
‫Zeitstempel, der eine riesige Zahl sein wird,
‫etwa so, und dann natürlich die Dateierweiterung, okay?
‫Und damit können wir grundsätzlich garantieren,
‫dass es nicht zwei Bilder mit dem gleichen Dateinamen gibt.
‫Wenn wir nur die Benutzer-ID
‫verwenden würden, würden natürlich mehrere Uploads durch
‫denselben Benutzer das vorherige Bild überschreiben.
‫Und wenn wir nur Benutzer mit dem Zeitstempel verwenden,
‫nun, wenn zwei Benutzer gleichzeitig ein Bild hochladen,
‫erhalten sie genau denselben Dateinamen, was
‫keinen Sinn ergibt.
‫In Ordnung, also lassen Sie
‫uns zunächst den Dateinamen aus der hochgeladenen Datei extrahieren.
‫Und wie bekommen wir das hin?
‫Schauen wir uns hier unsere Konsolenausgabe an, wo
‫wir die Anfrage hatten. Datei schon vor längerer Zeit.
‫Hier ist es also, also denken Sie daran, dass dieses Objekt
‫hier eine Anfrage war. Datei, und
‫genau das ist diese Datei hier, okay?
‫Hier haben wir also den
‫Mimetyp, und JPEG wird genau hier gespeichert, okay?
‫Und von hier bekommen wir
‫die Dateierweiterung.
‫Die Erweiterung entspricht also der Datei. mimetype, und dann teilen
‫wir diese Zeichenfolge durch den Schrägstrich auf und nehmen
‫das zweite Element des resultierenden Arrays.
‫Und das wird dann nur dieser Teil sein, also nur dieser.
‫Alles klar, das ist die Erweiterung.
‫Und so müssen
‫wir nach wie vor die Callback-Funktion ohne Fehler aufrufen und dann
‫den Dateinamen, den wir angeben möchten.
‫Das wird also Benutzer-, dann die Benutzer-ID sein, erinnerst du dich?
‫Da wir hier also Zugriff auf die Anfrage haben, ist
‫das ganz einfach, Anfrage. Nutzer. Ich würde.
‫Und das ist, wie Sie
‫wissen, die ID des aktuell angemeldeten Benutzers.
‫Dann der Zeitstempel, also Datum. Nun, okay, und dann
‫die Erweiterung, die wir gerade erstellt haben, in Ordnung?
‫Also lasst uns diesen Kommentar
‫loswerden, und das ist eigentlich unser Speicher.
‫Also im Grunde eine vollständige Definition, wie
‫wir unsere Dateien speichern möchten,
‫mit dem Ziel und dem Dateinamen.
‫Als nächstes erstellen wir einen Multer-Filter.
‫Nennen wir es also genau so.
‫Und der Filter in Multer ist
‫einfach wieder eine Callback-Funktion, ähnlich denjenigen, die wir zuvor
‫hatten, und greift auf die Anfrage, Datei und eine Callback-Funktion zu.
‫Und bei dieser Funktion besteht das Ziel im
‫Wesentlichen darin, zu testen, ob es sich bei der hochgeladenen Datei um ein Bild handelt.
‫Und wenn dies der Fall ist, übergeben wir
‫true an die Callback-Funktion, und
‫wenn nicht, übergeben wir false zusammen mit einem Fehler
‫an die Callback-Funktion.
‫Denn auch hier möchten wir nicht zulassen, dass
‫Dateien hochgeladen werden, die keine Bilder sind.
‫Und genau dafür ist dieser Filter da.
‫Wenn Sie nun in
‫Ihrer eigenen Anwendung etwas anderes hochladen möchten, sagen wir CSV-Dateien,
‫dann können Sie dies natürlich anstelle von Bildern testen.
‫All das, was wir hier machen, funktioniert
‫also nicht nur für
‫Bilder, sondern wirklich für alle Arten
‫von Dateien, die Sie hochladen möchten, in Ordnung?
‫Auch hier sprechen wir in diesem Fall wirklich über Bilder. Lassen Sie uns also
‫testen, ob es sich bei der hochgeladenen Datei um ein Bild handelt.
‫Und dafür werden wir wieder den Mimetyp verwenden,
‫denn egal, welcher
‫Bildtyp hochgeladen wird, also egal ob JPEG, PNG, Bitmap
‫oder TIFF oder wirklich alles
‫andere, der Mimetyp beginnt immer mit Bild.
‫Und jetzt können wir das testen.
‫Also wenn Datei. Mime Typ. startWith, image, und
‫ich bin mir nicht sicher, ob wir diese Methode schon einmal verwendet
‫haben, aber es ist eine ziemlich neue und sehr nützliche String-Methode,
‫die in JavaScript verfügbar ist, also
‫in allen JavaScript im Allgemeinen.
‫Wenn wir also tatsächlich ein Bild haben, dann gibt es
‫wieder keinen Fehler und wir geben wahr, wie
‫ich am Anfang sagte.
‫Aber sonst übergeben wir dann tatsächlich einen Fehler und
‫dann false.
‫Also setzen wir hier einfach ein x und false.
‫Für dieses x hier erstellen wir jetzt einen AppError, genau wie wir
‫es die ganze Zeit gemacht haben.
‫Und das haben wir hier eigentlich schon.
‫Sagen wir also
‫ein neuer AppError, kein Bild, bitte
‫laden Sie nur Bilder hoch, in Ordnung?
‫Und dann eine 400 für eine schlechte Anfrage.
‫Großartig, wir haben also unseren Speicher, wir haben unseren Filter, jetzt ist
‫es an der Zeit,
‫sie tatsächlich zu verwenden, um den Upload zu erstellen.
‫Alles klar, der Upload sieht jetzt nicht so
‫aus, sondern wir übergeben diese Variablen.
‫In Multer können wir also den Speicher angeben,
‫und das ist unser multerStorage.
‫Und dann der
‫fileFilter, die Variable, die wir multerFilter genannt haben.
‫Okay. Das war's.
‫Und natürlich hätten wir all
‫dies hier direkt in dieses Optionsobjekt hier einfügen können.
‫Aber normalerweise ziehe ich es vor, dies
‫außerhalb zu tun und die Variablen dann einfach an ein Optionsobjekt zu übergeben.
‫Das sieht dann etwas sauberer aus.
‫Dies sind also viele Schritte, die
‫wir unternehmen müssen, um unsere Multer-Middleware wirklich zu erstellen.
‫Aber zum Schluss verwenden wir
‫dann natürlich, genau
‫wie im letzten Video, diesen Upload, und nennen ihn
‫Single, mit dem Namen des Feldes.
‫Also Foto, und dann erstellen wir von dort aus einen Export
‫oder eine Middleware, die wir eigentlich schon in
‫unseren Router eingebaut haben.
‫Lassen Sie uns nun diese alte Art von Bild löschen,
‫die wir hier zuvor hatten.
‫Nein, das hat nicht funktioniert.
‫Und jetzt testen wir es hier noch einmal.
‫Zurück in Postman haben wir hier immer noch unseren
‫Namen und das Leo-Image, und los geht's.
‫Und wir haben keinen Fehler bekommen, was gut ist.
‫Und sehen wir uns hier noch einmal unsere Ausgabe an.
‫Hier ist also am Anfang alles
‫gleich, aber dann sieht man, dass unser Dateiname nun tatsächlich richtig ist.
‫Und wenn Sie hier in unseren Folder schauen,
‫dann gibt es tatsächlich unser Bild.
‫Und genau das haben wir hochgeladen.
‫Das sind also Dev-Daten, Bilder, Leo.
‫Und tatsächlich ist das genau das gleiche.
‫Super, das ist toll.
‫Um diesen Filter auch hier zu
‫testen, versuchen wir, eine andere Datei hochzuladen, die kein Bild ist.
‫Wählen wir hier also etwas anderes aus unseren Dev-Daten aus,
‫und sagen wir einfach ein paar JSON-Daten.
‫Warten wir also ab, wenn wir hier einen Fehler bekommen.
‫Und tatsächlich bekommen wir einen.
‫Also kein Bild, bitte nur Bilder hochladen.
‫Und so heißt es, dass das auch funktioniert.
‫So perfekt, dass alle unsere Multer-Konfigurationen jetzt wirklich
‫gut funktionieren, aber natürlich fehlt
‫noch ein Schritt.
‫Und das bedeutet, den Benutzer tatsächlich
‫mit dem neu aktualisierten Bild zu verknüpfen, oder?
‫Denn gerade jetzt haben wir
‫in der Datenbank offensichtlich
‫noch den Pfad, oder eigentlich den Namen
‫des alten Bildes, denn nirgendwo in unserem Code
‫haben wir angegeben, dass wir das Benutzerdokument selbst aktualisieren wollen, oder?
‫Lassen Sie uns das im nächsten Video beheben.