1 00:00:01,140 --> 00:00:03,990 ‫Sprecher: Nachdem die Funktion zum Hochladen 2 00:00:03,990 --> 00:00:08,080 ‫von Benutzerfotos nun abgeschlossen ist, lernen wir nun, wie 3 00:00:08,080 --> 00:00:10,080 ‫Sie mehrere Dateien gleichzeitig 4 00:00:10,080 --> 00:00:13,170 ‫hochladen und auch mehrere Bilder gleichzeitig verarbeiten. 5 00:00:13,170 --> 00:00:15,430 ‫In diesem und im 6 00:00:15,430 --> 00:00:18,713 ‫nächsten Vortrag werden wir Tourbilder hochladen und bearbeiten. 7 00:00:20,770 --> 00:00:23,750 ‫Und zu Beginn erinnern wir uns eigentlich daran, welche 8 00:00:23,750 --> 00:00:28,070 ‫Art von Bildern wir für unsere Touren wollen und auch wie viele, und 9 00:00:28,070 --> 00:00:31,033 ‫so sollten wir uns hier unser Tour-Modell ansehen. 10 00:00:32,450 --> 00:00:37,450 ‫Hier haben wir also das Bildcover und das ist eigentlich nur 11 00:00:38,050 --> 00:00:40,170 ‫ein Bild und dann 12 00:00:40,170 --> 00:00:42,400 ‫haben wir auch das Bildfeld, 13 00:00:42,400 --> 00:00:45,610 ‫das ein Array von Bildern sein wird. 14 00:00:45,610 --> 00:00:48,390 ‫Und normalerweise sollten dies mindestens drei Bilder sein, 15 00:00:48,390 --> 00:00:51,000 ‫denn das ist die Anzahl der Bilder, die 16 00:00:51,000 --> 00:00:52,950 ‫wir auf der Tour-Detailseite haben. 17 00:00:52,950 --> 00:00:53,810 ‫Richtig? 18 00:00:53,810 --> 00:00:56,010 ‫Wir werden also wieder 19 00:00:56,010 --> 00:00:58,290 ‫Bildcover und Bilder als Array haben. 20 00:00:58,290 --> 00:00:59,410 ‫Gut. 21 00:00:59,410 --> 00:01:01,240 ‫Jetzt werden 22 00:01:01,240 --> 00:01:04,080 ‫wir diese Bilder hochladen und 23 00:01:04,080 --> 00:01:06,140 ‫verarbeiten sehr ähnlich wie 24 00:01:06,140 --> 00:01:09,620 ‫bei den Benutzern, also gehen wir tatsächlich 25 00:01:09,620 --> 00:01:13,444 ‫in den Benutzer-Controller und kopieren zumindest diesen 26 00:01:13,444 --> 00:01:15,820 ‫ersten Teil der Multer-Konfiguration hierher. 27 00:01:15,820 --> 00:01:18,620 ‫Na gut, also schnapp dir das 28 00:01:18,620 --> 00:01:21,883 ‫und dann im Tourcontroller, gleich hier oben, lass 29 00:01:23,130 --> 00:01:25,774 ‫es gleich hier hinlegen und 30 00:01:25,774 --> 00:01:29,293 ‫lass uns auch noch das Multer und Scharf fordern. 31 00:01:33,410 --> 00:01:37,610 ‫Alles klar, großartig. 32 00:01:37,610 --> 00:01:39,850 ‫Und genau wie zuvor werden 33 00:01:39,850 --> 00:01:42,750 ‫wir die Bilder im Speicher ablegen, in 34 00:01:42,750 --> 00:01:46,900 ‫Ordnung, und wir lassen auch nur Bilder unseren Filter passieren. 35 00:01:46,900 --> 00:01:51,720 ‫Mit anderen Worten, wir wollen nur Bilder hochladen können. 36 00:01:51,720 --> 00:01:52,553 ‫Gut. 37 00:01:52,553 --> 00:01:54,670 ‫Dann erstellen oder hochladen 38 00:01:54,670 --> 00:01:57,060 ‫wir hier genau wie zuvor, und 39 00:01:57,060 --> 00:01:58,180 ‫lassen Sie 40 00:01:58,180 --> 00:02:01,420 ‫uns nun die Middleware aus diesem Upload erstellen. 41 00:02:01,420 --> 00:02:02,780 ‫Gut. 42 00:02:02,780 --> 00:02:07,780 ‫Also Punkt-Upload-Tour, Bilder exportieren, dann hochladen. 43 00:02:12,540 --> 00:02:14,536 ‫Und jetzt kommt 44 00:02:14,536 --> 00:02:17,020 ‫der andere Teil, also etwas, 45 00:02:17,020 --> 00:02:19,650 ‫das sich von dem unterscheidet, was 46 00:02:19,650 --> 00:02:24,380 ‫wir hier im Benutzer-Controller gemacht haben, weil wir Upload-Punkt-Single hatten. 47 00:02:24,380 --> 00:02:25,213 ‫Okay. 48 00:02:25,213 --> 00:02:28,110 ‫Das lag daran, dass wir nur ein einziges Feld 49 00:02:28,110 --> 00:02:30,000 ‫mit einer Datei hatten, die 50 00:02:30,000 --> 00:02:32,930 ‫wir hochladen wollten, und hier ist der Name dieses Felds. 51 00:02:32,930 --> 00:02:33,763 ‫Richtig? 52 00:02:33,763 --> 00:02:36,150 ‫Aber jetzt haben wir tatsächlich mehrere Dateien und 53 00:02:36,150 --> 00:02:38,490 ‫in einer davon haben wir ein Bild 54 00:02:38,490 --> 00:02:40,920 ‫und in der anderen haben wir drei Bilder. 55 00:02:40,920 --> 00:02:42,537 ‫Also, wie können wir das tun? 56 00:02:42,537 --> 00:02:47,010 ‫Nun, wir werden Punktfelder zum Hochladen verwenden, und Multer ist also 57 00:02:47,010 --> 00:02:49,850 ‫tatsächlich perfekt in der Lage, mit 58 00:02:49,850 --> 00:02:52,280 ‫dieser Art von Situationen umzugehen. 59 00:02:52,280 --> 00:02:54,570 ‫Hier übergeben wir also ein Array und 60 00:02:54,570 --> 00:02:57,520 ‫jedes der Elemente ist ein Objekt, in dem wir 61 00:02:57,520 --> 00:02:59,283 ‫dann den Feldnamen angeben. 62 00:03:01,020 --> 00:03:02,420 ‫Denken Sie daran, dass 63 00:03:02,420 --> 00:03:07,420 ‫die erste die Bildabdeckung ist, und dann sagen wir, dass die maximale Anzahl Eins ist. 64 00:03:09,920 --> 00:03:11,820 ‫Das bedeutet, dass 65 00:03:11,820 --> 00:03:14,220 ‫wir nur ein Feld namens Bildabdeckung 66 00:03:14,220 --> 00:03:16,730 ‫haben können, das dann verarbeitet wird. 67 00:03:16,730 --> 00:03:20,163 ‫In Ordnung, und dann machen wir dasselbe für unsere Bilder, das 68 00:03:21,910 --> 00:03:24,210 ‫ist das andere Feld in unserer Datenbank, 69 00:03:24,210 --> 00:03:26,300 ‫und hier nennen wir es auch 70 00:03:27,400 --> 00:03:30,683 ‫Bilder und hier sagen wir, dass die maximale Anzahl drei ist. 71 00:03:31,950 --> 00:03:32,783 ‫Gut. 72 00:03:34,440 --> 00:03:37,350 ‫Und für den Fall, dass wir das Bildcover 73 00:03:37,350 --> 00:03:41,340 ‫nicht hatten und dieses nur ein Feld hätte, das mehrere Bilder 74 00:03:41,340 --> 00:03:43,870 ‫oder mehrere Dateien gleichzeitig akzeptiert, hätten wir 75 00:03:43,870 --> 00:03:45,483 ‫es so machen können. 76 00:03:46,990 --> 00:03:51,910 ‫Also würden wir dann das Upload-Dot-Array verwenden, okay? 77 00:03:51,910 --> 00:03:53,460 ‫Und dann der Name 78 00:03:55,920 --> 00:04:00,730 ‫des Feldes und dann im Grunde das Maximum hier als Zahl wie folgt. 79 00:04:00,730 --> 00:04:01,640 ‫Gut? 80 00:04:01,640 --> 00:04:06,120 ‫Wenn es also nur einen gibt, dann ist es Upload Dot Single, sagen 81 00:04:09,520 --> 00:04:13,240 ‫wir Bild, wenn es mehrere mit demselben Namen gibt, dann ist 82 00:04:13,240 --> 00:04:16,330 ‫es Upload Dot Array und wenn es im Grunde 83 00:04:16,330 --> 00:04:19,303 ‫eine Mischung davon gibt, dann Upload Dot Fields. 84 00:04:21,330 --> 00:04:22,750 ‫Okay? 85 00:04:22,750 --> 00:04:25,300 ‫Das sieht jetzt vielleicht etwas 86 00:04:25,300 --> 00:04:28,320 ‫kompliziert aus, also lasst uns, bevor wir fortfahren, 87 00:04:28,320 --> 00:04:31,630 ‫diese Art von Abfrage in Postman tatsächlich replizieren, okay? 88 00:04:31,630 --> 00:04:33,750 ‫Und bevor wir das tun, müssen 89 00:04:33,750 --> 00:04:35,523 ‫wir eine neue Tour erstellen. 90 00:04:37,190 --> 00:04:39,280 ‫Alles klar, und eigentlich werde ich das 91 00:04:39,280 --> 00:04:42,490 ‫hier im Kompass tun, indem ich einfach eine der Touren, 92 00:04:42,490 --> 00:04:44,330 ‫die wir bereits haben, duplizieren. 93 00:04:44,330 --> 00:04:46,623 ‫Sagen wir hier, den Sea Explorer, und 94 00:04:47,920 --> 00:04:49,680 ‫jetzt dupliziere ich ihn. 95 00:04:49,680 --> 00:04:53,780 ‫Und so kann ich hier ändern, was ich anders haben 96 00:04:53,780 --> 00:04:56,743 ‫möchte und dieses hier heißt The Mountain 97 00:04:59,270 --> 00:05:04,263 ‫Biker, sagen wir Dauer von fünf, maximale Gruppengröße von zehn, und dann 98 00:05:05,190 --> 00:05:08,120 ‫ist es wirklich wichtig, das Image-Cover 99 00:05:08,120 --> 00:05:12,840 ‫loszuwerden, denn das ist es, was wir später aktualisieren möchten und 100 00:05:12,840 --> 00:05:14,453 ‫auch das Bilder-Array. 101 00:05:15,640 --> 00:05:20,300 ‫Angelegt kann man auch gehen und natürlich 102 00:05:20,300 --> 00:05:25,300 ‫müssen wir die Schnecke wechseln, also der Mountainbiker. 103 00:05:27,780 --> 00:05:28,710 ‫Okay? 104 00:05:28,710 --> 00:05:30,390 ‫Übrigens mussten wir eine 105 00:05:30,390 --> 00:05:34,200 ‫neue Tour wie diese erstellen, damit wir tatsächlich die Orte, 106 00:05:34,200 --> 00:05:36,970 ‫die Zusammenfassung und Beschreibung und all das 107 00:05:36,970 --> 00:05:41,030 ‫Zeug haben, damit der Tourist auf unserer Website richtig rendern kann. 108 00:05:41,030 --> 00:05:44,770 ‫In Ordnung, also fügen wir es ein 109 00:05:44,770 --> 00:05:49,270 ‫und so sollte es hier ganz am Ende sein, okay. 110 00:05:49,270 --> 00:05:54,270 ‫Also schnappen wir uns die ID hier und jetzt hier in 111 00:05:55,070 --> 00:05:59,020 ‫Postman lasst uns dann die Tour aktualisieren. 112 00:05:59,020 --> 00:06:02,960 ‫Also geben wir das hier und jetzt in unseren Körper 113 00:06:02,960 --> 00:06:07,960 ‫ein, erinnern wir uns daran, dass wir von Rohdaten zu Formdaten wechseln müssen. 114 00:06:08,104 --> 00:06:09,103 ‫Okay? 115 00:06:11,490 --> 00:06:16,490 ‫Schließen wir all dies hier und loggen uns auch hier als 116 00:06:17,090 --> 00:06:20,210 ‫Admin ein, da sonst das Aktualisieren der 117 00:06:20,210 --> 00:06:22,010 ‫Tour nicht funktioniert. 118 00:06:23,070 --> 00:06:28,070 ‫Also admin@nators. jo, alles klar. 119 00:06:31,740 --> 00:06:35,508 ‫Lassen Sie uns jetzt hier einfach eine Körperanforderung neu erstellen, ähnlich 120 00:06:35,508 --> 00:06:38,210 ‫der, die wir gerade hier angegeben haben. 121 00:06:38,210 --> 00:06:42,070 ‫Also im Grunde ähnlich dem, was unser Multer-Upload erwartet, 122 00:06:42,070 --> 00:06:44,973 ‫also ein Bildcover und drei Bilder. 123 00:06:47,060 --> 00:06:52,060 ‫Also, Bildcover, das eine Datei ist, und das können wir auswählen. 124 00:06:55,670 --> 00:06:58,630 ‫Und hier haben wir also diese neuen 125 00:06:59,660 --> 00:07:02,050 ‫Fotos für Touren und lasst 126 00:07:02,050 --> 00:07:05,837 ‫uns dieses zuerst hier als Titelbild und dann Bilder 127 00:07:08,450 --> 00:07:12,290 ‫verwenden, lasst uns das auch hier ablegen, und dann 128 00:07:12,290 --> 00:07:14,543 ‫hier die anderen drei. 129 00:07:16,420 --> 00:07:19,943 ‫Und jetzt, wie Sie sehen, werden sie alle Bilder genannt. 130 00:07:26,440 --> 00:07:29,940 ‫Okay, und wir können nur maximal drei haben, 131 00:07:29,940 --> 00:07:32,070 ‫mindestens drei davon werden 132 00:07:32,070 --> 00:07:34,680 ‫von Multer verarbeitet, in Ordnung? 133 00:07:37,620 --> 00:07:40,490 ‫Und tatsächlich sehen Sie hier, dass wir dieses 134 00:07:40,490 --> 00:07:43,380 ‫Bild wirklich skalieren müssen, da auf unserer Website 135 00:07:43,380 --> 00:07:46,090 ‫alle in diesem Querformat und nicht im Hochformat, 136 00:07:46,090 --> 00:07:48,550 ‫wie wir es hier haben, erscheinen. 137 00:07:48,550 --> 00:07:49,383 ‫Gut? 138 00:07:49,383 --> 00:07:51,139 ‫Und deshalb ist 139 00:07:51,139 --> 00:07:55,940 ‫es natürlich notwendig, diese Bilder auch zu verarbeiten, in Ordnung? 140 00:07:55,940 --> 00:07:58,590 ‫Und natürlich können wir hier auch 141 00:07:58,590 --> 00:08:03,563 ‫andere Dinge ändern, sagen wir also, wir wollen den Preis auf 9-9-7 ändern, okay? 142 00:08:05,610 --> 00:08:09,690 ‫Nun, ich werde diese Anfrage noch nicht senden, da wir 143 00:08:09,690 --> 00:08:12,500 ‫zu diesem Zeitpunkt keine Logik implementiert haben, 144 00:08:12,500 --> 00:08:15,280 ‫um sie zu verarbeiten, richtig, weil 145 00:08:15,280 --> 00:08:17,260 ‫wir sie nicht wirklich 146 00:08:17,260 --> 00:08:21,360 ‫in das Dateisystem hochladen, sondern nur im Speicher speichern . 147 00:08:21,360 --> 00:08:23,870 ‫Um sie kurz anzuschauen, 148 00:08:23,870 --> 00:08:26,808 ‫können wir hier unsere nächste Middleware 149 00:08:26,808 --> 00:08:29,913 ‫erstellen, die diese Bilder verarbeiten wird. 150 00:08:31,250 --> 00:08:36,250 ‫Exportieren Sie also Tourbilder mit Punktänderung, also Anfrage, Antwort und weiter, 151 00:08:42,810 --> 00:08:47,810 ‫und lassen Sie sie jetzt hier an der Konsole protokollieren. 152 00:08:50,620 --> 00:08:53,840 ‫Alles klar, und falls wir mehrere Dateien haben, 153 00:08:53,840 --> 00:08:58,520 ‫handelt es sich tatsächlich um Punktdateien auf Anfrage und nicht nur um Dateien. 154 00:08:58,520 --> 00:08:59,610 ‫Gut? 155 00:08:59,610 --> 00:09:02,460 ‫Dies hier erzeugt also 156 00:09:04,030 --> 00:09:07,870 ‫im Grunde eine Anforderungspunktdatei, während die Felder 157 00:09:07,870 --> 00:09:12,603 ‫und das Array beide Anforderungspunktdateien erzeugen, also den Plural. 158 00:09:14,215 --> 00:09:16,420 ‫Also gut, dann loggt das 159 00:09:16,420 --> 00:09:19,690 ‫in die Konsole und dann auch hier weiter 160 00:09:19,690 --> 00:09:21,440 ‫anrufen, damit wir 161 00:09:21,440 --> 00:09:25,000 ‫dann tatsächlich den Request-Response-Zyklus später beenden können, okay. 162 00:09:25,000 --> 00:09:26,730 ‫Speichern Sie es und 163 00:09:26,730 --> 00:09:29,700 ‫jetzt müssen wir nur noch diese beiden neuen Middlewares 164 00:09:29,700 --> 00:09:32,790 ‫zum Routenhandler hinzufügen, um die Anforderung tatsächlich zu testen. 165 00:09:32,790 --> 00:09:37,130 ‫Alles klar, also Tourrouten und genau wie bei den Usern, erlauben wir 166 00:09:37,130 --> 00:09:39,600 ‫hier der Einfachheit halber nur das Hochladen 167 00:09:39,600 --> 00:09:41,953 ‫von Bildern bei einem Tourupdate. 168 00:09:43,360 --> 00:09:48,360 ‫Hier unten haben wir also diese Patch-Anfrage, in 169 00:09:49,280 --> 00:09:52,320 ‫Ordnung, und wir haben 170 00:09:52,320 --> 00:09:56,180 ‫bereits eine Reihe von Middlewares, also 171 00:09:56,180 --> 00:10:01,180 ‫schützen, auf Admins und Guides beschränken, und jetzt 172 00:10:03,160 --> 00:10:08,160 ‫können wir auch Tour-Controller-Dot-Upload-Tour-Bilder und Tour-Controller-Dot-Resize-Tour hinzufügen Bilder. 173 00:10:08,360 --> 00:10:13,130 ‫Das ist also ein wirklich schöner Middleware-Stack hier, okay? 174 00:10:13,130 --> 00:10:16,000 ‫Und so denke ich, dass wir jetzt bereit sind, 175 00:10:16,000 --> 00:10:18,890 ‫die Anfrage, die wir hier erstellt haben, tatsächlich zu testen. 176 00:10:18,890 --> 00:10:21,830 ‫Und natürlich wird es nicht wirklich etwas tun, 177 00:10:21,830 --> 00:10:24,500 ‫es wird diese Bilder nirgendwo speichern und auch 178 00:10:24,500 --> 00:10:26,780 ‫die Datenbank nicht aktualisieren, aber 179 00:10:26,780 --> 00:10:30,453 ‫im Moment wollen wir nur das Ergebnis in der Konsole sehen. 180 00:10:31,370 --> 00:10:34,290 ‫Nun, es hätte eigentlich den Preis aktualisieren sollen, 181 00:10:34,290 --> 00:10:37,010 ‫also schauen wir uns das schnell an. 182 00:10:37,010 --> 00:10:39,790 ‫Ja, also der Preis wurde jetzt aktualisiert, 183 00:10:39,790 --> 00:10:43,200 ‫aber die Bilder haben offensichtlich nicht geklappt, in Ordnung? 184 00:10:43,200 --> 00:10:46,810 ‫Und jetzt haben wir sie in der Konsole, also 185 00:10:46,810 --> 00:10:49,843 ‫machen wir das ein bisschen größer und 186 00:10:49,843 --> 00:10:53,400 ‫hier haben wir das Bildcover, wo wir den Feldnamen, 187 00:10:53,400 --> 00:10:56,520 ‫den Originalnamen und auch den Mimetyp haben, 188 00:10:56,520 --> 00:11:00,620 ‫okay, dann sehen Sie den Puffer hier , und daher 189 00:11:00,620 --> 00:11:03,230 ‫ist dies im Grunde eine Darstellung 190 00:11:03,230 --> 00:11:05,240 ‫des Bildes im Speicher. 191 00:11:05,240 --> 00:11:06,810 ‫Jetzt ist es 192 00:11:06,810 --> 00:11:10,953 ‫wichtig zu beachten, dass sogar das Bildcover ein Array ist, okay? 193 00:11:12,290 --> 00:11:13,590 ‫Wenn wir 194 00:11:13,590 --> 00:11:16,480 ‫also das Bild von der Bildabdeckung abrufen, 195 00:11:16,480 --> 00:11:19,660 ‫müssen wir das erste Element dieses Arrays verwenden. 196 00:11:19,660 --> 00:11:22,380 ‫Und dann in den Bildern, hier ist es offensichtlich, 197 00:11:22,380 --> 00:11:24,700 ‫dass wir ein Array haben und hier 198 00:11:24,700 --> 00:11:28,080 ‫haben wir dann für jedes der Bilder ein Objekt wie dieses. 199 00:11:28,080 --> 00:11:32,530 ‫Also mit dem ursprünglichen Namen Tour vier, drei und zwei, und 200 00:11:32,530 --> 00:11:34,363 ‫dann jeweils als Puffer. 201 00:11:36,030 --> 00:11:40,860 ‫Alles klar, alles ist gut verbunden und wir müssen 202 00:11:40,860 --> 00:11:45,353 ‫jetzt nur noch diese Tour-Bilder mit Größenänderung erstellen, denn 203 00:11:46,290 --> 00:11:49,300 ‫hier werden die Bilder dann verarbeitet 204 00:11:49,300 --> 00:11:51,290 ‫und auch auf der 205 00:11:51,290 --> 00:11:53,210 ‫Festplatte gespeichert. 206 00:11:53,210 --> 00:11:56,903 ‫Okay, und das ist das Thema der nächsten Vorlesung.