‫Sprecher: Nachdem die Funktion zum Hochladen
‫von Benutzerfotos nun abgeschlossen ist, lernen wir nun, wie
‫Sie mehrere Dateien gleichzeitig
‫hochladen und auch mehrere Bilder gleichzeitig verarbeiten.
‫In diesem und im
‫nächsten Vortrag werden wir Tourbilder hochladen und bearbeiten.
‫Und zu Beginn erinnern wir uns eigentlich daran, welche
‫Art von Bildern wir für unsere Touren wollen und auch wie viele, und
‫so sollten wir uns hier unser Tour-Modell ansehen.
‫Hier haben wir also das Bildcover und das ist eigentlich nur
‫ein Bild und dann
‫haben wir auch das Bildfeld,
‫das ein Array von Bildern sein wird.
‫Und normalerweise sollten dies mindestens drei Bilder sein,
‫denn das ist die Anzahl der Bilder, die
‫wir auf der Tour-Detailseite haben.
‫Richtig?
‫Wir werden also wieder
‫Bildcover und Bilder als Array haben.
‫Gut.
‫Jetzt werden
‫wir diese Bilder hochladen und
‫verarbeiten sehr ähnlich wie
‫bei den Benutzern, also gehen wir tatsächlich
‫in den Benutzer-Controller und kopieren zumindest diesen
‫ersten Teil der Multer-Konfiguration hierher.
‫Na gut, also schnapp dir das
‫und dann im Tourcontroller, gleich hier oben, lass
‫es gleich hier hinlegen und
‫lass uns auch noch das Multer und Scharf fordern.
‫Alles klar, großartig.
‫Und genau wie zuvor werden
‫wir die Bilder im Speicher ablegen, in
‫Ordnung, und wir lassen auch nur Bilder unseren Filter passieren.
‫Mit anderen Worten, wir wollen nur Bilder hochladen können.
‫Gut.
‫Dann erstellen oder hochladen
‫wir hier genau wie zuvor, und
‫lassen Sie
‫uns nun die Middleware aus diesem Upload erstellen.
‫Gut.
‫Also Punkt-Upload-Tour, Bilder exportieren, dann hochladen.
‫Und jetzt kommt
‫der andere Teil, also etwas,
‫das sich von dem unterscheidet, was
‫wir hier im Benutzer-Controller gemacht haben, weil wir Upload-Punkt-Single hatten.
‫Okay.
‫Das lag daran, dass wir nur ein einziges Feld
‫mit einer Datei hatten, die
‫wir hochladen wollten, und hier ist der Name dieses Felds.
‫Richtig?
‫Aber jetzt haben wir tatsächlich mehrere Dateien und
‫in einer davon haben wir ein Bild
‫und in der anderen haben wir drei Bilder.
‫Also, wie können wir das tun?
‫Nun, wir werden Punktfelder zum Hochladen verwenden, und Multer ist also
‫tatsächlich perfekt in der Lage, mit
‫dieser Art von Situationen umzugehen.
‫Hier übergeben wir also ein Array und
‫jedes der Elemente ist ein Objekt, in dem wir
‫dann den Feldnamen angeben.
‫Denken Sie daran, dass
‫die erste die Bildabdeckung ist, und dann sagen wir, dass die maximale Anzahl Eins ist.
‫Das bedeutet, dass
‫wir nur ein Feld namens Bildabdeckung
‫haben können, das dann verarbeitet wird.
‫In Ordnung, und dann machen wir dasselbe für unsere Bilder, das
‫ist das andere Feld in unserer Datenbank,
‫und hier nennen wir es auch
‫Bilder und hier sagen wir, dass die maximale Anzahl drei ist.
‫Gut.
‫Und für den Fall, dass wir das Bildcover
‫nicht hatten und dieses nur ein Feld hätte, das mehrere Bilder
‫oder mehrere Dateien gleichzeitig akzeptiert, hätten wir
‫es so machen können.
‫Also würden wir dann das Upload-Dot-Array verwenden, okay?
‫Und dann der Name
‫des Feldes und dann im Grunde das Maximum hier als Zahl wie folgt.
‫Gut?
‫Wenn es also nur einen gibt, dann ist es Upload Dot Single, sagen
‫wir Bild, wenn es mehrere mit demselben Namen gibt, dann ist
‫es Upload Dot Array und wenn es im Grunde
‫eine Mischung davon gibt, dann Upload Dot Fields.
‫Okay?
‫Das sieht jetzt vielleicht etwas
‫kompliziert aus, also lasst uns, bevor wir fortfahren,
‫diese Art von Abfrage in Postman tatsächlich replizieren, okay?
‫Und bevor wir das tun, müssen
‫wir eine neue Tour erstellen.
‫Alles klar, und eigentlich werde ich das
‫hier im Kompass tun, indem ich einfach eine der Touren,
‫die wir bereits haben, duplizieren.
‫Sagen wir hier, den Sea Explorer, und
‫jetzt dupliziere ich ihn.
‫Und so kann ich hier ändern, was ich anders haben
‫möchte und dieses hier heißt The Mountain
‫Biker, sagen wir Dauer von fünf, maximale Gruppengröße von zehn, und dann
‫ist es wirklich wichtig, das Image-Cover
‫loszuwerden, denn das ist es, was wir später aktualisieren möchten und
‫auch das Bilder-Array.
‫Angelegt kann man auch gehen und natürlich
‫müssen wir die Schnecke wechseln, also der Mountainbiker.
‫Okay?
‫Übrigens mussten wir eine
‫neue Tour wie diese erstellen, damit wir tatsächlich die Orte,
‫die Zusammenfassung und Beschreibung und all das
‫Zeug haben, damit der Tourist auf unserer Website richtig rendern kann.
‫In Ordnung, also fügen wir es ein
‫und so sollte es hier ganz am Ende sein, okay.
‫Also schnappen wir uns die ID hier und jetzt hier in
‫Postman lasst uns dann die Tour aktualisieren.
‫Also geben wir das hier und jetzt in unseren Körper
‫ein, erinnern wir uns daran, dass wir von Rohdaten zu Formdaten wechseln müssen.
‫Okay?
‫Schließen wir all dies hier und loggen uns auch hier als
‫Admin ein, da sonst das Aktualisieren der
‫Tour nicht funktioniert.
‫Also admin@nators. jo, alles klar.
‫Lassen Sie uns jetzt hier einfach eine Körperanforderung neu erstellen, ähnlich
‫der, die wir gerade hier angegeben haben.
‫Also im Grunde ähnlich dem, was unser Multer-Upload erwartet,
‫also ein Bildcover und drei Bilder.
‫Also, Bildcover, das eine Datei ist, und das können wir auswählen.
‫Und hier haben wir also diese neuen
‫Fotos für Touren und lasst
‫uns dieses zuerst hier als Titelbild und dann Bilder
‫verwenden, lasst uns das auch hier ablegen, und dann
‫hier die anderen drei.
‫Und jetzt, wie Sie sehen, werden sie alle Bilder genannt.
‫Okay, und wir können nur maximal drei haben,
‫mindestens drei davon werden
‫von Multer verarbeitet, in Ordnung?
‫Und tatsächlich sehen Sie hier, dass wir dieses
‫Bild wirklich skalieren müssen, da auf unserer Website
‫alle in diesem Querformat und nicht im Hochformat,
‫wie wir es hier haben, erscheinen.
‫Gut?
‫Und deshalb ist
‫es natürlich notwendig, diese Bilder auch zu verarbeiten, in Ordnung?
‫Und natürlich können wir hier auch
‫andere Dinge ändern, sagen wir also, wir wollen den Preis auf 9-9-7 ändern, okay?
‫Nun, ich werde diese Anfrage noch nicht senden, da wir
‫zu diesem Zeitpunkt keine Logik implementiert haben,
‫um sie zu verarbeiten, richtig, weil
‫wir sie nicht wirklich
‫in das Dateisystem hochladen, sondern nur im Speicher speichern .
‫Um sie kurz anzuschauen,
‫können wir hier unsere nächste Middleware
‫erstellen, die diese Bilder verarbeiten wird.
‫Exportieren Sie also Tourbilder mit Punktänderung, also Anfrage, Antwort und weiter,
‫und lassen Sie sie jetzt hier an der Konsole protokollieren.
‫Alles klar, und falls wir mehrere Dateien haben,
‫handelt es sich tatsächlich um Punktdateien auf Anfrage und nicht nur um Dateien.
‫Gut?
‫Dies hier erzeugt also
‫im Grunde eine Anforderungspunktdatei, während die Felder
‫und das Array beide Anforderungspunktdateien erzeugen, also den Plural.
‫Also gut, dann loggt das
‫in die Konsole und dann auch hier weiter
‫anrufen, damit wir
‫dann tatsächlich den Request-Response-Zyklus später beenden können, okay.
‫Speichern Sie es und
‫jetzt müssen wir nur noch diese beiden neuen Middlewares
‫zum Routenhandler hinzufügen, um die Anforderung tatsächlich zu testen.
‫Alles klar, also Tourrouten und genau wie bei den Usern, erlauben wir
‫hier der Einfachheit halber nur das Hochladen
‫von Bildern bei einem Tourupdate.
‫Hier unten haben wir also diese Patch-Anfrage, in
‫Ordnung, und wir haben
‫bereits eine Reihe von Middlewares, also
‫schützen, auf Admins und Guides beschränken, und jetzt
‫können wir auch Tour-Controller-Dot-Upload-Tour-Bilder und Tour-Controller-Dot-Resize-Tour hinzufügen Bilder.
‫Das ist also ein wirklich schöner Middleware-Stack hier, okay?
‫Und so denke ich, dass wir jetzt bereit sind,
‫die Anfrage, die wir hier erstellt haben, tatsächlich zu testen.
‫Und natürlich wird es nicht wirklich etwas tun,
‫es wird diese Bilder nirgendwo speichern und auch
‫die Datenbank nicht aktualisieren, aber
‫im Moment wollen wir nur das Ergebnis in der Konsole sehen.
‫Nun, es hätte eigentlich den Preis aktualisieren sollen,
‫also schauen wir uns das schnell an.
‫Ja, also der Preis wurde jetzt aktualisiert,
‫aber die Bilder haben offensichtlich nicht geklappt, in Ordnung?
‫Und jetzt haben wir sie in der Konsole, also
‫machen wir das ein bisschen größer und
‫hier haben wir das Bildcover, wo wir den Feldnamen,
‫den Originalnamen und auch den Mimetyp haben,
‫okay, dann sehen Sie den Puffer hier , und daher
‫ist dies im Grunde eine Darstellung
‫des Bildes im Speicher.
‫Jetzt ist es
‫wichtig zu beachten, dass sogar das Bildcover ein Array ist, okay?
‫Wenn wir
‫also das Bild von der Bildabdeckung abrufen,
‫müssen wir das erste Element dieses Arrays verwenden.
‫Und dann in den Bildern, hier ist es offensichtlich,
‫dass wir ein Array haben und hier
‫haben wir dann für jedes der Bilder ein Objekt wie dieses.
‫Also mit dem ursprünglichen Namen Tour vier, drei und zwei, und
‫dann jeweils als Puffer.
‫Alles klar, alles ist gut verbunden und wir müssen
‫jetzt nur noch diese Tour-Bilder mit Größenänderung erstellen, denn
‫hier werden die Bilder dann verarbeitet
‫und auch auf der
‫Festplatte gespeichert.
‫Okay, und das ist das Thema der nächsten Vorlesung.