‫Jonas: In diesem zweiten Teil des Hochladens von Tourbildern
‫werden wir jetzt alle bearbeiten.
‫Aber bevor wir
‫damit beginnen, muss ich
‫noch etwas im Benutzer-Controller reparieren.
‫Und so eigentlich in diesem resizeUserPhoto, und das
‫heißt, dass wir diese
‫ganze Operation hier tatsächlich abwarten müssen, in Ordnung?
‫All dies hier wird also tatsächlich ein Versprechen zurückgeben, und
‫das macht Sinn, richtig,
‫denn all diese Operationen hier dauern einige Zeit und
‫laufen daher natürlich im Hintergrund ab.
‫Sie sind also asynchroner
‫Code und sollten die Ereignisschleife offensichtlich nicht blockieren.
‫Das Problem dabei ist, dass
‫wir gerade diese nächste Funktion hier aufrufen,
‫also die nächste Middleware, ohne wirklich darauf zu
‫warten, dass diese Operationen hier abgeschlossen sind.
‫Und das ist keine gute Idee.
‫Also lassen Sie uns hier
‫einfach wait verwenden und dann natürlich async und all das Zeug.
‫Also catchAsync hier drin.
‫In Ordnung, speichern Sie es, und das ist viel besser.
‫Und so werden wir jetzt
‫mit unseren Tourbildern etwas ganz Ähnliches machen.
‫Und so lassen Sie mich eigentlich weitermachen und dies kopieren.
‫In Ordnung, und obwohl es
‫nicht genau dasselbe sein wird, ist es gut, es bereits hier zu haben.
‫Dies wird also auch eine asynchrone Funktion sein.
‫Nun gut, wie bisher, falls keine Bilder
‫hochgeladen wurden, dann wollen
‫wir gleich zur nächsten Middleware übergehen.
‫Also wenn es keine Anfrage gibt. Dateien, und eigentlich gehe ich
‫noch einen Schritt weiter und erfordere,
‫dass sowohl das Bildcover als auch Bilder
‫vorhanden sind.
‫Im Grunde wollen wir also zur nächsten Middleware wechseln, falls
‫keine Anfrage kommt. Dateien. imageCover,
‫oder keine Anfrage. Dateien. Bilder.
‫Also in diesem Fall als nächstes.
‫Okay, und jetzt beginnen wir damit, das
‫Titelbild zu bearbeiten und dann im Grunde alle anderen Bilder in
‫einer Schleife.
‫Also andere Bilder.
‫Woher bekommen wir nun eigentlich das Titelbild?
‫Denken Sie daran, wie ich sagte, dass es auf Anfrage ist. Dateien?
‫Nicht mehr ablegen, und dann . coverImage
‫oder eigentlich imageCover.
‫Und dann erinnern Sie sich, wie es ein Array war?
‫Schauen wir uns das also noch einmal an.
‫Richtig, das ist alles eine Bitte. Dateien, und
‫von dort nehmen wir imageCover, und das
‫ist ein Array aus einem Element.
‫Also wollen wir jetzt die Elementnummer Null und
‫dann . Puffer.
‫Also dieses seltsam aussehende Ding hier.
‫Dann wollen wir die Größe auf ein
‫2/3-Verhältnis ändern, und die Breite
‫beträgt 2.000 Pixel und die Höhe 1.333, in Ordnung?
‫Das ist also wieder ein schönes 3/2-Verhältnis, das
‫bei Bildern sehr häufig vorkommt.
‫Als nächstes wollen wir es auch als JPEG mit 90% Qualität formatieren
‫und dann als Datei speichern.
‫Aber dieses Mal handelt es sich um
‫Bilder/Touren, und hier definieren wir unseren Dateinamen tatsächlich separat.
‫In Ordnung, denn wir werden es tatsächlich wieder brauchen.
‫Also imageCoverFilename, und so
‫müssen wir jetzt noch einmal einen eindeutigen Dateinamen erstellen.
‫Jetzt ist es also Tour, und dann setzen wir wieder die
‫ID der Tour hier ein, wo es vorher die ID des Benutzers war.
‫Und so ist das auf Anfrage. params, denken Sie also daran,
‫dass diese Route immer
‫die ID der Tour enthält und daher
‫auf Anfrage ist. Parameter. Ich würde.
‫Dann wieder der Zeitstempel Date. Nun, und dann sagen
‫wir, dass dies das Titelbild ist, okay?
‫Und die anderen bekommen dann einige Nummern.
‫Und dann natürlich. jpeg, und verwenden wir das hier.
‫Also imageCoverFilename.
‫Okay, und als letzten Schritt müssen
‫wir es tatsächlich
‫ermöglichen, dass unser Update-Tour-Handler
‫diesen Dateinamen des Bildcovers aufnimmt, um es im
‫aktuellen Tourdokument zu aktualisieren, okay?
‫Schauen wir uns
‫also kurz an, wie das Dokument tatsächlich aktualisiert wird.
‫Und so nutzen
‫wir ganz einfach diese updateOne Werksfunktion.
‫Und dieser aktualisiert einfach alle Daten, die sich im
‫Hauptteil befinden, auf das neue Dokument.
‫Also nur um Ihnen das hier zu beweisen.
‫updateOne nimmt also die gesamte Anfrage auf. Körper, okay?
‫Das Geheimnis besteht nun darin, diesen Dateinamen für
‫das Bildcover auf Anfrage anzugeben. Körper, in Ordnung?
‫Also beantragen. Karosserie. Titelbild.
‫Oh und wieder heißt es stattdessen
‫imageCover, sollte gleich imageCoverFilename sein, okay, macht das Sinn?
‫Und natürlich heißt es imageCover,
‫weil das der Name ist, den wir in unserer Schemadefinition haben.
‫Wenn es die Aktualisierung
‫durchführt, wird dieses Feld im Hauptteil mit
‫dem Feld in unserer Datenbank abgeglichen.
‫Und tatsächlich können wir das
‫ein bisschen umgestalten, weil wir diesen Variablennamen hier überhaupt nicht brauchen.
‫Also könnten wir diesen Dateinamen einfach hier direkt auf den Körper setzen.
‫Legen Sie das also hier ab und verwenden Sie es dann sofort hier.
‫Wir brauchen diese Codezeile also überhaupt nicht.
‫Großartig, und bevor wir zu den anderen Bildern übergehen, testen wir es
‫tatsächlich mit dem, was wir zu diesem Zeitpunkt
‫bereits haben.
‫Also lass uns diese Konsole einfach loswerden. log, und
‫wenn wir jetzt die Anfrage
‫machen, dann sollte unser Titelbild bereits
‫hochgeladen und in das Tourdokument eingefügt werden, okay?
‫Also diese anderen drei Bilder hier natürlich nicht, aber
‫zumindest das Bildcover sollte
‫jetzt an dieser Stelle funktionieren, zumindest
‫wenn wir alles richtig gemacht haben.
‫Mal sehen, ob es hier irgendwo ist und
‫Bilder offensichtlich immer noch leer sind.
‫Aber ich suche jetzt nach dem Titelbild, also wo ist das?
‫Und hier ist es, also imageCover, und
‫das sieht dem Dateinamen, den wir gerade
‫angegeben haben, sehr ähnlich.
‫Und lasst uns tatsächlich versuchen, unsere Seite mit allen Touren hier neu zu laden, und
‫vielleicht ist unsere neue Tour schon da.
‫Ah, los geht's, das ist also die neue Mountainbike-Tour.
‫Und das hier ist tatsächlich das Bild, das wir gerade hochgeladen haben.
‫So schön.
‫Wenn wir jetzt versuchen, diese
‫Seite zu öffnen, sind die anderen Bilder nicht hier, in Ordnung?
‫Sie sind also nirgendwo zu
‫finden, und das werden wir natürlich als nächstes tun.
‫Gut.
‫Denken Sie also daran, dass
‫unsere Bilder hier auch ein Array
‫sind, das dann all diese neuen Datei-Uploads enthält.
‫Lassen Sie uns nun tatsächlich eine Schleife verwenden,
‫um jeden von ihnen in einer Iteration zu verarbeiten.
‫Also beantragen. Dateien. Bilder. für jede.
‫Und dann unsere Callback-Funktion,
‫in der wir Zugriff auf die aktuelle Datei bekommen.
‫In Ordnung, jetzt müssen wir hier tatsächlich
‫den aktuellen Dateinamen erstellen, und Sie werden
‫gleich sehen, warum.
‫Dateiname ist also gleich und dann etwas sehr Ähnliches.
‫Mit dem Unterschied, dass es jetzt kein
‫Cover ist, sondern wir sie eins, zwei und drei nennen wollen.
‫Und so bekommen wir
‫in unserer Callback-Funktion eigentlich auch Zugriff auf den aktuellen Index, okay?
‫Wir brauchen also eine Datei und ich für den Index.
‫Hier ist es also kein Cover, sondern Index plus eins.
‫Also plus eins, und das
‫nur, weil dieser Index nullbasiert ist, in Ordnung?
‫Als nächstes kommt der Verarbeitungsschritt selbst, der
‫diesem wiederum sehr ähnlich ist.
‫Und jetzt müssen wir dies natürlich auch als asynchron markieren.
‫In Ordnung, und hier unten ist es jetzt der Dateiname.
‫Okay, warum brauchen wir nun eigentlich diesen Dateinamen?
‫Nun, wir brauchen es, weil wir diesen Dateinamen jetzt in
‫die Anfrage einfügen müssen. Karosserie. Bilder, und das ist genau die gleiche Logik wie
‫wir hier zuvor auf Anfrage hatten. Karosserie. BildAbdeckung.
‫Denken Sie also daran, dass in
‫unserer Sammlung anfordern. Karosserie. Bilder ist eigentlich ein Array.
‫Und jetzt müssen wir dieses Array erstellen und
‫als leeres Array starten.
‫Also beantragen. Karosserie. images
‫als leeres Array, und dann werden wir
‫in jeder Iteration den aktuellen Dateinamen
‫in dieses Images-Array übertragen.
‫Also beantragen. Karosserie. Bilder.
‫push, den Dateinamen, in Ordnung?
‫Und damit sind wir fast fertig.
‫Es gibt nur ein kleines Problem,
‫nämlich die Tatsache, dass
‫wir in diesem Fall, also in dieser Schleife, Async-Await tatsächlich
‫nicht richtig verwenden.
‫Und das liegt daran, dass sich
‫dieses asynchrone Warten hier nur innerhalb dieser
‫Rückruffunktion der foreach-Schleife befindet.
‫Das wird den Code also nicht
‫davon abhalten, sich direkt neben diese Zeile zu bewegen,
‫wo wir dann die nächste Middleware aufrufen, okay?
‫Nochmals, im Moment warten wir hier noch
‫einmal auf nichts davon, da dieses asynchrone
‫Erwarten innerhalb der
‫Callback-Funktion einer dieser Schleifenmethoden stattfindet.
‫Und wir sind tatsächlich schon einmal auf solche
‫Probleme gestoßen, aber dafür gibt es glücklicherweise eine
‫Lösung, denn da dies hier eine asynchrone Funktion ist,
‫wird sie ein neues Versprechen zurückgeben.
‫Wenn wir also eine Karte
‫erstellen, können wir tatsächlich eine Reihe all dieser Versprechen speichern.
‫Und wenn wir ein Array haben,
‫können wir Promise verwenden. alle, um sie alle zu erwarten.
‫Und damit warten wir dann tatsächlich,
‫bis all dieser Code, und in diesem
‫Fall, bis all diese Bildverarbeitungen abgeschlossen
‫sind, und gehen erst dann zur nächsten Zeile
‫über, die die nächste
‫Middleware aufruft, um die Tourdokumente wirklich zu aktualisieren.
‫Und wenn wir das in
‫diesem Fall nicht machen würden, würde
‫es wirklich gar nicht funktionieren, denn ohne dieses Pushen
‫hier die Anfrage. Karosserie. Bilder wären immer noch leer, wenn
‫wir das nächste Mal anrufen.
‫Daher würde dann keiner
‫dieser Bildnamen im Dokument beibehalten, okay?
‫Lassen Sie uns nun Versprechen verwenden. alle, und
‫eigentlich speichere ich dieses Array hier nicht einmal in einer Variablen,
‫sondern verwende stattdessen Promise. alles gleich
‫dazu.
‫Erwarte also das Versprechen. alle auf dem
‫Array, die davon zurückkehren, okay?
‫Also ich hoffe, das war sinnvoll.
‫Lassen Sie uns nun den Körper hier in der Konsole protokollieren.
‫In Ordnung, und damit sollten wir jetzt bereit
‫sein, alle unsere Bilder hochzuladen, in Ordnung?
‫Lass uns hier runter gehen und es noch einmal versuchen.
‫In Ordnung, also wo ist unser Bilder-Array?
‫Nun, vielleicht war es irgendwo hier oben, ah, hier ist es.
‫Also ich habe das irgendwie übersehen.
‫Und das sieht sehr vielversprechend aus, oder?
‫Also drei schöne Bilder, lasst uns
‫nun einen Blick hier auf unsere Seite werfen.
‫Ah, da sind sie, aber nicht ganz richtig, oder?
‫Es sieht also so aus, als hätten
‫wir das Titelbild einfach dreimal hochgeladen.
‫Werfen wir also einen Blick auf Postman, aber
‫die Bildnamen sind tatsächlich richtig,
‫und daher stimmt etwas mit unserer Verarbeitung dort nicht.
‫Schauen wir uns auch Anfragen an. Körper, oh, und ich habe vergessen,
‫es hier zu platzieren.
‫Okay, aber ich denke, es ist nicht einmal notwendig,
‫weil wir gerade in Postman
‫gesehen haben, dass die Dateinamen tatsächlich richtig sind.
‫Also brauchen wir diesen nicht mehr.
‫Werfen wir nun einen Blick auf die
‫Dateinamen, die wir gerade hochgeladen haben, also in der Öffentlichkeit und in den Touren.
‫Und hier sind sie also.
‫Dies war also wahrscheinlich der erste vom letzten Test.
‫Und wie Sie sehen, sind sie tatsächlich
‫alle genau das gleiche Bild.
‫Cover, eins, zwei und drei sind also dieselben Bilder, und
‫das ist also nicht richtig.
‫Und ich sehe tatsächlich sofort, was das Problem ist.
‫Sie sehen also, dass wir tatsächlich immer noch eine
‫Anfrage lesen. Dateien. imageCover und
‫nicht die Datei aus der aktuellen Iteration dieser Schleife.
‫Okay, das sollte stattdessen file sein. Puffer.
‫In Ordnung, also lass uns
‫alle diese löschen.
‫Alles klar, und versuchen Sie es jetzt einfach noch einmal.
‫Also schicken wir das.
‫Die Namen scheinen immer noch richtig zu
‫sein, aber jetzt, wenn wir das neu laden, schauen wir mal.
‫Ah, das sieht richtig aus.
‫Schön schön.
‫Sie sehen, die Bilder sind alle schön formatiert, sogar
‫dieses, das im Hochformat und nicht einmal im
‫Querformat war, aber wir haben das
‫im Grunde genommen und es sieht immer noch schön aus.
‫Okay, hier können wir das jetzt bestätigen,
‫sodass es tatsächlich in den 2.000er mal 1.333 Pixeln liegt.
‫Okay, es ist hier noch ein bisschen groß, also könnten
‫wir die Qualität vielleicht noch ein bisschen reduzieren, aber das
‫ist nicht wirklich wichtig.
‫Was hier wirklich zählt, ist,
‫dass die Logik, die wir hier gerade angewendet haben, wirklich funktioniert.
‫Um kurz zusammenzufassen, was wir in diesen beiden Vorträgen gemacht haben.
‫Also haben wir einen Multer-Upload erstellt, der den Speicher und diesen
‫Filter nur für Bilder verwendet.
‫Dann haben wir die Bild-Middleware für die Upload-Tour
‫mithilfe von Upload erstellt. Felder, die ein
‫Bild-Cover und drei Bilder aufnehmen, und
‫dann auf Anfrage die Dateieigenschaft so setzen, in Ordnung?
‫Dann ändern wir in unserer nächsten Middleware die Größe dieser
‫Bilder und zuerst
‫das Titelbild und dann die restlichen drei Bilder.
‫Und was hier wirklich wichtig ist,
‫ist, wie wir die Bilddateinamen auf Anfrage angeben. Karosserie.
‫Und das tun wir, damit in
‫der nächsten Middleware, die der
‫eigentliche Route-Handler ist, diese Daten dann beim Aktualisieren
‫in das neue Dokument eingefügt werden, okay?
‫Das machen wir mit dem Bildcover, und wir
‫machen das auch mit den restlichen Bildern, indem wir
‫es in den Körper schieben. images, die, wie
‫wir aus unserem Tour-Schema wissen,
‫ein Array von Strings erwartet.
‫Also in diesem Fall Dateinamen.
‫Also über diese anderen Bilder hatten
‫wir sie auf Anfrage. Dateien. images, also ist
‫es ein Array, und wir durchlaufen es natürlich mit map.
‫Und wir verwenden map, damit wir die drei
‫Promises, die das Ergebnis dieser drei
‫asynchronen Funktionen sind, im Grunde hier speichern können,
‫um sie dann alle hier
‫mit Promise abzuwarten. alles okay?
‫Und erst danach gehen
‫wir zum eigentlichen Tour-Update-Handler über, okay?
‫Und dieser Teil ist wirklich wichtig,
‫daher ist es wichtig, dass wir
‫erst zur nächsten Middleware übergehen, sobald dieser Teil hier
‫wirklich abgeschlossen ist.
‫Denn ansonsten bitte anfragen. Karosserie. Bilder werden leer
‫sein und unsere Dateinamen werden dann natürlich nicht
‫im aktuellen Tourdokument gespeichert, in Ordnung?
‫Und damit ist der Teil
‫dieses Abschnitts zum Hochladen von Bildern oder Dateien abgeschlossen.
‫Also ich hoffe, das hat Spaß
‫gemacht, ich weiß, dass es für mich wirklich cool war.
‫Also ich mag diese Art von
‫Sachen sehr, wodurch sich meine Anwendungen wie eine wirklich reale Welt anfühlen.
‫Wie auch immer, ich hoffe es hat euch
‫gefallen und wir sehen uns im nächsten.