1 00:00:01,210 --> 00:00:04,730 ‫Jonas: In diesem zweiten Teil des Hochladens von Tourbildern 2 00:00:04,730 --> 00:00:06,943 ‫werden wir jetzt alle bearbeiten. 3 00:00:08,670 --> 00:00:10,300 ‫Aber bevor wir 4 00:00:10,300 --> 00:00:12,330 ‫damit beginnen, muss ich 5 00:00:12,330 --> 00:00:14,500 ‫noch etwas im Benutzer-Controller reparieren. 6 00:00:14,500 --> 00:00:18,530 ‫Und so eigentlich in diesem resizeUserPhoto, und das 7 00:00:18,530 --> 00:00:21,110 ‫heißt, dass wir diese 8 00:00:21,110 --> 00:00:25,210 ‫ganze Operation hier tatsächlich abwarten müssen, in Ordnung? 9 00:00:25,210 --> 00:00:28,940 ‫All dies hier wird also tatsächlich ein Versprechen zurückgeben, und 10 00:00:28,940 --> 00:00:30,640 ‫das macht Sinn, richtig, 11 00:00:30,640 --> 00:00:33,950 ‫denn all diese Operationen hier dauern einige Zeit und 12 00:00:33,950 --> 00:00:36,460 ‫laufen daher natürlich im Hintergrund ab. 13 00:00:36,460 --> 00:00:38,390 ‫Sie sind also asynchroner 14 00:00:38,390 --> 00:00:41,850 ‫Code und sollten die Ereignisschleife offensichtlich nicht blockieren. 15 00:00:41,850 --> 00:00:43,940 ‫Das Problem dabei ist, dass 16 00:00:43,940 --> 00:00:46,260 ‫wir gerade diese nächste Funktion hier aufrufen, 17 00:00:46,260 --> 00:00:49,030 ‫also die nächste Middleware, ohne wirklich darauf zu 18 00:00:49,030 --> 00:00:51,330 ‫warten, dass diese Operationen hier abgeschlossen sind. 19 00:00:51,330 --> 00:00:53,380 ‫Und das ist keine gute Idee. 20 00:00:53,380 --> 00:00:55,653 ‫Also lassen Sie uns hier 21 00:00:56,800 --> 00:01:01,483 ‫einfach wait verwenden und dann natürlich async und all das Zeug. 22 00:01:02,520 --> 00:01:04,483 ‫Also catchAsync hier drin. 23 00:01:07,110 --> 00:01:11,020 ‫In Ordnung, speichern Sie es, und das ist viel besser. 24 00:01:11,020 --> 00:01:12,930 ‫Und so werden wir jetzt 25 00:01:12,930 --> 00:01:15,580 ‫mit unseren Tourbildern etwas ganz Ähnliches machen. 26 00:01:15,580 --> 00:01:18,150 ‫Und so lassen Sie mich eigentlich weitermachen und dies kopieren. 27 00:01:20,850 --> 00:01:22,540 ‫In Ordnung, und obwohl es 28 00:01:22,540 --> 00:01:26,923 ‫nicht genau dasselbe sein wird, ist es gut, es bereits hier zu haben. 29 00:01:28,760 --> 00:01:31,113 ‫Dies wird also auch eine asynchrone Funktion sein. 30 00:01:36,440 --> 00:01:39,320 ‫Nun gut, wie bisher, falls keine Bilder 31 00:01:39,320 --> 00:01:41,740 ‫hochgeladen wurden, dann wollen 32 00:01:41,740 --> 00:01:44,390 ‫wir gleich zur nächsten Middleware übergehen. 33 00:01:45,770 --> 00:01:50,290 ‫Also wenn es keine Anfrage gibt. Dateien, und eigentlich gehe ich 34 00:01:50,290 --> 00:01:52,620 ‫noch einen Schritt weiter und erfordere, 35 00:01:52,620 --> 00:01:55,300 ‫dass sowohl das Bildcover als auch Bilder 36 00:01:55,300 --> 00:01:56,690 ‫vorhanden sind. 37 00:01:56,690 --> 00:01:59,450 ‫Im Grunde wollen wir also zur nächsten Middleware wechseln, falls 38 00:01:59,450 --> 00:02:02,663 ‫keine Anfrage kommt. Dateien. imageCover, 39 00:02:06,150 --> 00:02:11,150 ‫oder keine Anfrage. Dateien. Bilder. 40 00:02:15,240 --> 00:02:18,463 ‫Also in diesem Fall als nächstes. 41 00:02:20,840 --> 00:02:24,003 ‫Okay, und jetzt beginnen wir damit, das 42 00:02:26,860 --> 00:02:31,420 ‫Titelbild zu bearbeiten und dann im Grunde alle anderen Bilder in 43 00:02:31,420 --> 00:02:32,623 ‫einer Schleife. 44 00:02:34,220 --> 00:02:36,170 ‫Also andere Bilder. 45 00:02:36,170 --> 00:02:39,550 ‫Woher bekommen wir nun eigentlich das Titelbild? 46 00:02:39,550 --> 00:02:44,460 ‫Denken Sie daran, wie ich sagte, dass es auf Anfrage ist. Dateien? 47 00:02:44,460 --> 00:02:47,403 ‫Nicht mehr ablegen, und dann . coverImage 48 00:02:49,080 --> 00:02:50,610 ‫oder eigentlich imageCover. 49 00:02:50,610 --> 00:02:52,653 ‫Und dann erinnern Sie sich, wie es ein Array war? 50 00:02:53,610 --> 00:02:56,113 ‫Schauen wir uns das also noch einmal an. 51 00:02:58,850 --> 00:03:02,170 ‫Richtig, das ist alles eine Bitte. Dateien, und 52 00:03:02,170 --> 00:03:05,161 ‫von dort nehmen wir imageCover, und das 53 00:03:05,161 --> 00:03:07,950 ‫ist ein Array aus einem Element. 54 00:03:07,950 --> 00:03:11,710 ‫Also wollen wir jetzt die Elementnummer Null und 55 00:03:11,710 --> 00:03:13,780 ‫dann . Puffer. 56 00:03:13,780 --> 00:03:17,120 ‫Also dieses seltsam aussehende Ding hier. 57 00:03:17,120 --> 00:03:20,750 ‫Dann wollen wir die Größe auf ein 58 00:03:20,750 --> 00:03:23,710 ‫2/3-Verhältnis ändern, und die Breite 59 00:03:23,710 --> 00:03:28,090 ‫beträgt 2.000 Pixel und die Höhe 1.333, in Ordnung? 60 00:03:28,090 --> 00:03:31,380 ‫Das ist also wieder ein schönes 3/2-Verhältnis, das 61 00:03:31,380 --> 00:03:33,750 ‫bei Bildern sehr häufig vorkommt. 62 00:03:33,750 --> 00:03:38,687 ‫Als nächstes wollen wir es auch als JPEG mit 90% Qualität formatieren 63 00:03:38,687 --> 00:03:40,820 ‫und dann als Datei speichern. 64 00:03:40,820 --> 00:03:43,763 ‫Aber dieses Mal handelt es sich um 65 00:03:45,828 --> 00:03:49,230 ‫Bilder/Touren, und hier definieren wir unseren Dateinamen tatsächlich separat. 66 00:03:50,890 --> 00:03:54,480 ‫In Ordnung, denn wir werden es tatsächlich wieder brauchen. 67 00:03:54,480 --> 00:03:56,557 ‫Also imageCoverFilename, und so 68 00:04:00,330 --> 00:04:04,110 ‫müssen wir jetzt noch einmal einen eindeutigen Dateinamen erstellen. 69 00:04:04,110 --> 00:04:08,070 ‫Jetzt ist es also Tour, und dann setzen wir wieder die 70 00:04:08,070 --> 00:04:12,380 ‫ID der Tour hier ein, wo es vorher die ID des Benutzers war. 71 00:04:12,380 --> 00:04:16,010 ‫Und so ist das auf Anfrage. params, denken Sie also daran, 72 00:04:16,010 --> 00:04:17,770 ‫dass diese Route immer 73 00:04:17,770 --> 00:04:20,140 ‫die ID der Tour enthält und daher 74 00:04:20,140 --> 00:04:24,393 ‫auf Anfrage ist. Parameter. Ich würde. 75 00:04:26,290 --> 00:04:31,290 ‫Dann wieder der Zeitstempel Date. Nun, und dann sagen 76 00:04:33,810 --> 00:04:38,060 ‫wir, dass dies das Titelbild ist, okay? 77 00:04:38,060 --> 00:04:40,720 ‫Und die anderen bekommen dann einige Nummern. 78 00:04:40,720 --> 00:04:44,843 ‫Und dann natürlich. jpeg, und verwenden wir das hier. 79 00:04:45,890 --> 00:04:47,807 ‫Also imageCoverFilename. 80 00:04:49,130 --> 00:04:52,100 ‫Okay, und als letzten Schritt müssen 81 00:04:52,100 --> 00:04:53,720 ‫wir es tatsächlich 82 00:04:53,720 --> 00:04:55,660 ‫ermöglichen, dass unser Update-Tour-Handler 83 00:04:55,660 --> 00:04:59,230 ‫diesen Dateinamen des Bildcovers aufnimmt, um es im 84 00:04:59,230 --> 00:05:01,680 ‫aktuellen Tourdokument zu aktualisieren, okay? 85 00:05:01,680 --> 00:05:03,290 ‫Schauen wir uns 86 00:05:03,290 --> 00:05:06,830 ‫also kurz an, wie das Dokument tatsächlich aktualisiert wird. 87 00:05:06,830 --> 00:05:08,780 ‫Und so nutzen 88 00:05:08,780 --> 00:05:11,290 ‫wir ganz einfach diese updateOne Werksfunktion. 89 00:05:11,290 --> 00:05:14,430 ‫Und dieser aktualisiert einfach alle Daten, die sich im 90 00:05:14,430 --> 00:05:17,163 ‫Hauptteil befinden, auf das neue Dokument. 91 00:05:18,460 --> 00:05:21,670 ‫Also nur um Ihnen das hier zu beweisen. 92 00:05:21,670 --> 00:05:26,670 ‫updateOne nimmt also die gesamte Anfrage auf. Körper, okay? 93 00:05:26,730 --> 00:05:29,920 ‫Das Geheimnis besteht nun darin, diesen Dateinamen für 94 00:05:29,920 --> 00:05:34,313 ‫das Bildcover auf Anfrage anzugeben. Körper, in Ordnung? 95 00:05:36,720 --> 00:05:39,760 ‫Also beantragen. Karosserie. Titelbild. 96 00:05:41,840 --> 00:05:45,270 ‫Oh und wieder heißt es stattdessen 97 00:05:45,270 --> 00:05:49,850 ‫imageCover, sollte gleich imageCoverFilename sein, okay, macht das Sinn? 98 00:05:52,350 --> 00:05:54,350 ‫Und natürlich heißt es imageCover, 99 00:05:54,350 --> 00:05:57,710 ‫weil das der Name ist, den wir in unserer Schemadefinition haben. 100 00:05:57,710 --> 00:05:59,730 ‫Wenn es die Aktualisierung 101 00:05:59,730 --> 00:06:02,280 ‫durchführt, wird dieses Feld im Hauptteil mit 102 00:06:02,280 --> 00:06:04,530 ‫dem Feld in unserer Datenbank abgeglichen. 103 00:06:04,530 --> 00:06:06,920 ‫Und tatsächlich können wir das 104 00:06:06,920 --> 00:06:10,950 ‫ein bisschen umgestalten, weil wir diesen Variablennamen hier überhaupt nicht brauchen. 105 00:06:10,950 --> 00:06:15,113 ‫Also könnten wir diesen Dateinamen einfach hier direkt auf den Körper setzen. 106 00:06:16,040 --> 00:06:20,260 ‫Legen Sie das also hier ab und verwenden Sie es dann sofort hier. 107 00:06:20,260 --> 00:06:23,390 ‫Wir brauchen diese Codezeile also überhaupt nicht. 108 00:06:23,390 --> 00:06:27,430 ‫Großartig, und bevor wir zu den anderen Bildern übergehen, testen wir es 109 00:06:27,430 --> 00:06:29,940 ‫tatsächlich mit dem, was wir zu diesem Zeitpunkt 110 00:06:29,940 --> 00:06:30,903 ‫bereits haben. 111 00:06:31,980 --> 00:06:35,080 ‫Also lass uns diese Konsole einfach loswerden. log, und 112 00:06:35,080 --> 00:06:37,170 ‫wenn wir jetzt die Anfrage 113 00:06:37,170 --> 00:06:40,100 ‫machen, dann sollte unser Titelbild bereits 114 00:06:40,100 --> 00:06:43,950 ‫hochgeladen und in das Tourdokument eingefügt werden, okay? 115 00:06:43,950 --> 00:06:46,870 ‫Also diese anderen drei Bilder hier natürlich nicht, aber 116 00:06:46,870 --> 00:06:48,300 ‫zumindest das Bildcover sollte 117 00:06:48,300 --> 00:06:50,183 ‫jetzt an dieser Stelle funktionieren, zumindest 118 00:06:51,340 --> 00:06:53,253 ‫wenn wir alles richtig gemacht haben. 119 00:06:54,410 --> 00:06:56,863 ‫Mal sehen, ob es hier irgendwo ist und 120 00:06:57,760 --> 00:06:59,963 ‫Bilder offensichtlich immer noch leer sind. 121 00:07:00,970 --> 00:07:05,970 ‫Aber ich suche jetzt nach dem Titelbild, also wo ist das? 122 00:07:06,640 --> 00:07:09,280 ‫Und hier ist es, also imageCover, und 123 00:07:09,280 --> 00:07:11,843 ‫das sieht dem Dateinamen, den wir gerade 124 00:07:11,843 --> 00:07:13,970 ‫angegeben haben, sehr ähnlich. 125 00:07:13,970 --> 00:07:18,970 ‫Und lasst uns tatsächlich versuchen, unsere Seite mit allen Touren hier neu zu laden, und 126 00:07:21,130 --> 00:07:23,550 ‫vielleicht ist unsere neue Tour schon da. 127 00:07:23,550 --> 00:07:28,430 ‫Ah, los geht's, das ist also die neue Mountainbike-Tour. 128 00:07:28,430 --> 00:07:32,180 ‫Und das hier ist tatsächlich das Bild, das wir gerade hochgeladen haben. 129 00:07:32,180 --> 00:07:34,090 ‫So schön. 130 00:07:34,090 --> 00:07:36,300 ‫Wenn wir jetzt versuchen, diese 131 00:07:36,300 --> 00:07:40,870 ‫Seite zu öffnen, sind die anderen Bilder nicht hier, in Ordnung? 132 00:07:40,870 --> 00:07:42,780 ‫Sie sind also nirgendwo zu 133 00:07:42,780 --> 00:07:45,513 ‫finden, und das werden wir natürlich als nächstes tun. 134 00:07:47,520 --> 00:07:48,353 ‫Gut. 135 00:07:50,340 --> 00:07:52,820 ‫Denken Sie also daran, dass 136 00:07:52,820 --> 00:07:55,700 ‫unsere Bilder hier auch ein Array 137 00:07:55,700 --> 00:07:59,360 ‫sind, das dann all diese neuen Datei-Uploads enthält. 138 00:07:59,360 --> 00:08:01,500 ‫Lassen Sie uns nun tatsächlich eine Schleife verwenden, 139 00:08:01,500 --> 00:08:03,833 ‫um jeden von ihnen in einer Iteration zu verarbeiten. 140 00:08:04,900 --> 00:08:09,700 ‫Also beantragen. Dateien. Bilder. für jede. 141 00:08:14,330 --> 00:08:15,810 ‫Und dann unsere Callback-Funktion, 142 00:08:15,810 --> 00:08:18,823 ‫in der wir Zugriff auf die aktuelle Datei bekommen. 143 00:08:21,200 --> 00:08:23,780 ‫In Ordnung, jetzt müssen wir hier tatsächlich 144 00:08:23,780 --> 00:08:26,560 ‫den aktuellen Dateinamen erstellen, und Sie werden 145 00:08:26,560 --> 00:08:28,210 ‫gleich sehen, warum. 146 00:08:29,550 --> 00:08:33,850 ‫Dateiname ist also gleich und dann etwas sehr Ähnliches. 147 00:08:35,758 --> 00:08:38,160 ‫Mit dem Unterschied, dass es jetzt kein 148 00:08:38,160 --> 00:08:41,230 ‫Cover ist, sondern wir sie eins, zwei und drei nennen wollen. 149 00:08:41,230 --> 00:08:43,040 ‫Und so bekommen wir 150 00:08:43,040 --> 00:08:47,173 ‫in unserer Callback-Funktion eigentlich auch Zugriff auf den aktuellen Index, okay? 151 00:08:48,920 --> 00:08:53,920 ‫Wir brauchen also eine Datei und ich für den Index. 152 00:08:54,220 --> 00:08:57,923 ‫Hier ist es also kein Cover, sondern Index plus eins. 153 00:09:00,330 --> 00:09:04,240 ‫Also plus eins, und das 154 00:09:04,240 --> 00:09:09,010 ‫nur, weil dieser Index nullbasiert ist, in Ordnung? 155 00:09:09,010 --> 00:09:11,693 ‫Als nächstes kommt der Verarbeitungsschritt selbst, der 156 00:09:13,060 --> 00:09:15,603 ‫diesem wiederum sehr ähnlich ist. 157 00:09:17,400 --> 00:09:21,873 ‫Und jetzt müssen wir dies natürlich auch als asynchron markieren. 158 00:09:23,660 --> 00:09:27,083 ‫In Ordnung, und hier unten ist es jetzt der Dateiname. 159 00:09:29,360 --> 00:09:33,570 ‫Okay, warum brauchen wir nun eigentlich diesen Dateinamen? 160 00:09:33,570 --> 00:09:37,250 ‫Nun, wir brauchen es, weil wir diesen Dateinamen jetzt in 161 00:09:37,250 --> 00:09:42,250 ‫die Anfrage einfügen müssen. Karosserie. Bilder, und das ist genau die gleiche Logik wie 162 00:09:42,280 --> 00:09:45,913 ‫wir hier zuvor auf Anfrage hatten. Karosserie. BildAbdeckung. 163 00:09:47,040 --> 00:09:49,020 ‫Denken Sie also daran, dass in 164 00:09:49,020 --> 00:09:52,870 ‫unserer Sammlung anfordern. Karosserie. Bilder ist eigentlich ein Array. 165 00:09:52,870 --> 00:09:55,610 ‫Und jetzt müssen wir dieses Array erstellen und 166 00:09:55,610 --> 00:09:57,343 ‫als leeres Array starten. 167 00:09:58,400 --> 00:10:01,430 ‫Also beantragen. Karosserie. images 168 00:10:03,870 --> 00:10:07,150 ‫als leeres Array, und dann werden wir 169 00:10:07,150 --> 00:10:09,720 ‫in jeder Iteration den aktuellen Dateinamen 170 00:10:09,720 --> 00:10:11,770 ‫in dieses Images-Array übertragen. 171 00:10:11,770 --> 00:10:15,070 ‫Also beantragen. Karosserie. Bilder. 172 00:10:19,580 --> 00:10:23,370 ‫push, den Dateinamen, in Ordnung? 173 00:10:23,370 --> 00:10:25,100 ‫Und damit sind wir fast fertig. 174 00:10:25,100 --> 00:10:27,020 ‫Es gibt nur ein kleines Problem, 175 00:10:27,020 --> 00:10:28,530 ‫nämlich die Tatsache, dass 176 00:10:28,530 --> 00:10:31,710 ‫wir in diesem Fall, also in dieser Schleife, Async-Await tatsächlich 177 00:10:31,710 --> 00:10:33,200 ‫nicht richtig verwenden. 178 00:10:33,200 --> 00:10:35,560 ‫Und das liegt daran, dass sich 179 00:10:35,560 --> 00:10:38,450 ‫dieses asynchrone Warten hier nur innerhalb dieser 180 00:10:38,450 --> 00:10:40,550 ‫Rückruffunktion der foreach-Schleife befindet. 181 00:10:40,550 --> 00:10:42,880 ‫Das wird den Code also nicht 182 00:10:42,880 --> 00:10:46,300 ‫davon abhalten, sich direkt neben diese Zeile zu bewegen, 183 00:10:46,300 --> 00:10:49,390 ‫wo wir dann die nächste Middleware aufrufen, okay? 184 00:10:49,390 --> 00:10:52,510 ‫Nochmals, im Moment warten wir hier noch 185 00:10:52,510 --> 00:10:55,940 ‫einmal auf nichts davon, da dieses asynchrone 186 00:10:55,940 --> 00:10:58,000 ‫Erwarten innerhalb der 187 00:10:58,000 --> 00:11:00,440 ‫Callback-Funktion einer dieser Schleifenmethoden stattfindet. 188 00:11:00,440 --> 00:11:03,310 ‫Und wir sind tatsächlich schon einmal auf solche 189 00:11:03,310 --> 00:11:06,040 ‫Probleme gestoßen, aber dafür gibt es glücklicherweise eine 190 00:11:06,040 --> 00:11:08,970 ‫Lösung, denn da dies hier eine asynchrone Funktion ist, 191 00:11:08,970 --> 00:11:11,470 ‫wird sie ein neues Versprechen zurückgeben. 192 00:11:11,470 --> 00:11:13,610 ‫Wenn wir also eine Karte 193 00:11:13,610 --> 00:11:17,210 ‫erstellen, können wir tatsächlich eine Reihe all dieser Versprechen speichern. 194 00:11:17,210 --> 00:11:18,910 ‫Und wenn wir ein Array haben, 195 00:11:18,910 --> 00:11:22,190 ‫können wir Promise verwenden. alle, um sie alle zu erwarten. 196 00:11:22,190 --> 00:11:24,530 ‫Und damit warten wir dann tatsächlich, 197 00:11:24,530 --> 00:11:27,000 ‫bis all dieser Code, und in diesem 198 00:11:27,000 --> 00:11:29,340 ‫Fall, bis all diese Bildverarbeitungen abgeschlossen 199 00:11:29,340 --> 00:11:32,180 ‫sind, und gehen erst dann zur nächsten Zeile 200 00:11:32,180 --> 00:11:34,290 ‫über, die die nächste 201 00:11:34,290 --> 00:11:37,000 ‫Middleware aufruft, um die Tourdokumente wirklich zu aktualisieren. 202 00:11:37,000 --> 00:11:38,960 ‫Und wenn wir das in 203 00:11:38,960 --> 00:11:41,020 ‫diesem Fall nicht machen würden, würde 204 00:11:41,020 --> 00:11:44,090 ‫es wirklich gar nicht funktionieren, denn ohne dieses Pushen 205 00:11:44,090 --> 00:11:48,260 ‫hier die Anfrage. Karosserie. Bilder wären immer noch leer, wenn 206 00:11:48,260 --> 00:11:49,460 ‫wir das nächste Mal anrufen. 207 00:11:49,460 --> 00:11:51,880 ‫Daher würde dann keiner 208 00:11:51,880 --> 00:11:55,260 ‫dieser Bildnamen im Dokument beibehalten, okay? 209 00:11:55,260 --> 00:11:57,630 ‫Lassen Sie uns nun Versprechen verwenden. alle, und 210 00:11:57,630 --> 00:12:02,250 ‫eigentlich speichere ich dieses Array hier nicht einmal in einer Variablen, 211 00:12:02,250 --> 00:12:06,340 ‫sondern verwende stattdessen Promise. alles gleich 212 00:12:06,340 --> 00:12:07,913 ‫dazu. 213 00:12:09,030 --> 00:12:14,030 ‫Erwarte also das Versprechen. alle auf dem 214 00:12:15,010 --> 00:12:17,963 ‫Array, die davon zurückkehren, okay? 215 00:12:19,870 --> 00:12:21,906 ‫Also ich hoffe, das war sinnvoll. 216 00:12:21,906 --> 00:12:25,093 ‫Lassen Sie uns nun den Körper hier in der Konsole protokollieren. 217 00:12:28,390 --> 00:12:32,190 ‫In Ordnung, und damit sollten wir jetzt bereit 218 00:12:32,190 --> 00:12:35,560 ‫sein, alle unsere Bilder hochzuladen, in Ordnung? 219 00:12:35,560 --> 00:12:40,560 ‫Lass uns hier runter gehen und es noch einmal versuchen. 220 00:12:44,290 --> 00:12:46,903 ‫In Ordnung, also wo ist unser Bilder-Array? 221 00:12:54,440 --> 00:12:57,800 ‫Nun, vielleicht war es irgendwo hier oben, ah, hier ist es. 222 00:12:57,800 --> 00:12:59,660 ‫Also ich habe das irgendwie übersehen. 223 00:12:59,660 --> 00:13:03,300 ‫Und das sieht sehr vielversprechend aus, oder? 224 00:13:03,300 --> 00:13:05,730 ‫Also drei schöne Bilder, lasst uns 225 00:13:05,730 --> 00:13:08,693 ‫nun einen Blick hier auf unsere Seite werfen. 226 00:13:10,910 --> 00:13:15,910 ‫Ah, da sind sie, aber nicht ganz richtig, oder? 227 00:13:15,980 --> 00:13:18,540 ‫Es sieht also so aus, als hätten 228 00:13:18,540 --> 00:13:20,943 ‫wir das Titelbild einfach dreimal hochgeladen. 229 00:13:22,050 --> 00:13:24,710 ‫Werfen wir also einen Blick auf Postman, aber 230 00:13:24,710 --> 00:13:26,840 ‫die Bildnamen sind tatsächlich richtig, 231 00:13:26,840 --> 00:13:29,963 ‫und daher stimmt etwas mit unserer Verarbeitung dort nicht. 232 00:13:32,470 --> 00:13:37,050 ‫Schauen wir uns auch Anfragen an. Körper, oh, und ich habe vergessen, 233 00:13:37,050 --> 00:13:39,243 ‫es hier zu platzieren. 234 00:13:41,820 --> 00:13:44,220 ‫Okay, aber ich denke, es ist nicht einmal notwendig, 235 00:13:44,220 --> 00:13:45,700 ‫weil wir gerade in Postman 236 00:13:45,700 --> 00:13:47,763 ‫gesehen haben, dass die Dateinamen tatsächlich richtig sind. 237 00:13:48,630 --> 00:13:50,630 ‫Also brauchen wir diesen nicht mehr. 238 00:13:50,630 --> 00:13:53,150 ‫Werfen wir nun einen Blick auf die 239 00:13:53,150 --> 00:13:58,150 ‫Dateinamen, die wir gerade hochgeladen haben, also in der Öffentlichkeit und in den Touren. 240 00:14:00,570 --> 00:14:01,673 ‫Und hier sind sie also. 241 00:14:04,120 --> 00:14:07,763 ‫Dies war also wahrscheinlich der erste vom letzten Test. 242 00:14:10,980 --> 00:14:13,860 ‫Und wie Sie sehen, sind sie tatsächlich 243 00:14:13,860 --> 00:14:15,920 ‫alle genau das gleiche Bild. 244 00:14:15,920 --> 00:14:20,720 ‫Cover, eins, zwei und drei sind also dieselben Bilder, und 245 00:14:20,720 --> 00:14:23,760 ‫das ist also nicht richtig. 246 00:14:23,760 --> 00:14:27,500 ‫Und ich sehe tatsächlich sofort, was das Problem ist. 247 00:14:27,500 --> 00:14:30,980 ‫Sie sehen also, dass wir tatsächlich immer noch eine 248 00:14:30,980 --> 00:14:33,950 ‫Anfrage lesen. Dateien. imageCover und 249 00:14:33,950 --> 00:14:37,533 ‫nicht die Datei aus der aktuellen Iteration dieser Schleife. 250 00:14:39,090 --> 00:14:43,107 ‫Okay, das sollte stattdessen file sein. Puffer. 251 00:14:45,930 --> 00:14:48,210 ‫In Ordnung, also lass uns 252 00:14:48,210 --> 00:14:50,073 ‫alle diese löschen. 253 00:14:54,440 --> 00:14:57,253 ‫Alles klar, und versuchen Sie es jetzt einfach noch einmal. 254 00:14:59,490 --> 00:15:00,653 ‫Also schicken wir das. 255 00:15:03,220 --> 00:15:05,633 ‫Die Namen scheinen immer noch richtig zu 256 00:15:06,810 --> 00:15:10,310 ‫sein, aber jetzt, wenn wir das neu laden, schauen wir mal. 257 00:15:10,310 --> 00:15:12,680 ‫Ah, das sieht richtig aus. 258 00:15:12,680 --> 00:15:14,260 ‫Schön schön. 259 00:15:14,260 --> 00:15:17,120 ‫Sie sehen, die Bilder sind alle schön formatiert, sogar 260 00:15:17,120 --> 00:15:19,480 ‫dieses, das im Hochformat und nicht einmal im 261 00:15:19,480 --> 00:15:21,720 ‫Querformat war, aber wir haben das 262 00:15:21,720 --> 00:15:24,913 ‫im Grunde genommen und es sieht immer noch schön aus. 263 00:15:26,300 --> 00:15:29,473 ‫Okay, hier können wir das jetzt bestätigen, 264 00:15:31,000 --> 00:15:34,993 ‫sodass es tatsächlich in den 2.000er mal 1.333 Pixeln liegt. 265 00:15:37,220 --> 00:15:40,880 ‫Okay, es ist hier noch ein bisschen groß, also könnten 266 00:15:40,880 --> 00:15:44,360 ‫wir die Qualität vielleicht noch ein bisschen reduzieren, aber das 267 00:15:44,360 --> 00:15:46,280 ‫ist nicht wirklich wichtig. 268 00:15:46,280 --> 00:15:47,943 ‫Was hier wirklich zählt, ist, 269 00:15:47,943 --> 00:15:51,350 ‫dass die Logik, die wir hier gerade angewendet haben, wirklich funktioniert. 270 00:15:51,350 --> 00:15:55,233 ‫Um kurz zusammenzufassen, was wir in diesen beiden Vorträgen gemacht haben. 271 00:15:56,820 --> 00:16:00,920 ‫Also haben wir einen Multer-Upload erstellt, der den Speicher und diesen 272 00:16:00,920 --> 00:16:03,183 ‫Filter nur für Bilder verwendet. 273 00:16:04,330 --> 00:16:07,370 ‫Dann haben wir die Bild-Middleware für die Upload-Tour 274 00:16:07,370 --> 00:16:11,490 ‫mithilfe von Upload erstellt. Felder, die ein 275 00:16:11,490 --> 00:16:14,570 ‫Bild-Cover und drei Bilder aufnehmen, und 276 00:16:14,570 --> 00:16:19,020 ‫dann auf Anfrage die Dateieigenschaft so setzen, in Ordnung? 277 00:16:19,020 --> 00:16:22,600 ‫Dann ändern wir in unserer nächsten Middleware die Größe dieser 278 00:16:22,600 --> 00:16:24,170 ‫Bilder und zuerst 279 00:16:24,170 --> 00:16:27,090 ‫das Titelbild und dann die restlichen drei Bilder. 280 00:16:27,090 --> 00:16:28,930 ‫Und was hier wirklich wichtig ist, 281 00:16:28,930 --> 00:16:33,380 ‫ist, wie wir die Bilddateinamen auf Anfrage angeben. Karosserie. 282 00:16:33,380 --> 00:16:35,620 ‫Und das tun wir, damit in 283 00:16:35,620 --> 00:16:37,570 ‫der nächsten Middleware, die der 284 00:16:37,570 --> 00:16:40,230 ‫eigentliche Route-Handler ist, diese Daten dann beim Aktualisieren 285 00:16:40,230 --> 00:16:42,620 ‫in das neue Dokument eingefügt werden, okay? 286 00:16:42,620 --> 00:16:44,700 ‫Das machen wir mit dem Bildcover, und wir 287 00:16:44,700 --> 00:16:46,940 ‫machen das auch mit den restlichen Bildern, indem wir 288 00:16:46,940 --> 00:16:50,120 ‫es in den Körper schieben. images, die, wie 289 00:16:50,120 --> 00:16:52,510 ‫wir aus unserem Tour-Schema wissen, 290 00:16:52,510 --> 00:16:54,920 ‫ein Array von Strings erwartet. 291 00:16:54,920 --> 00:16:57,290 ‫Also in diesem Fall Dateinamen. 292 00:16:57,290 --> 00:16:58,980 ‫Also über diese anderen Bilder hatten 293 00:16:58,980 --> 00:17:03,490 ‫wir sie auf Anfrage. Dateien. images, also ist 294 00:17:03,490 --> 00:17:07,150 ‫es ein Array, und wir durchlaufen es natürlich mit map. 295 00:17:07,150 --> 00:17:10,130 ‫Und wir verwenden map, damit wir die drei 296 00:17:10,130 --> 00:17:12,680 ‫Promises, die das Ergebnis dieser drei 297 00:17:12,680 --> 00:17:15,710 ‫asynchronen Funktionen sind, im Grunde hier speichern können, 298 00:17:15,710 --> 00:17:17,920 ‫um sie dann alle hier 299 00:17:17,920 --> 00:17:20,860 ‫mit Promise abzuwarten. alles okay? 300 00:17:20,860 --> 00:17:23,680 ‫Und erst danach gehen 301 00:17:23,680 --> 00:17:26,950 ‫wir zum eigentlichen Tour-Update-Handler über, okay? 302 00:17:26,950 --> 00:17:28,670 ‫Und dieser Teil ist wirklich wichtig, 303 00:17:28,670 --> 00:17:30,650 ‫daher ist es wichtig, dass wir 304 00:17:30,650 --> 00:17:33,620 ‫erst zur nächsten Middleware übergehen, sobald dieser Teil hier 305 00:17:33,620 --> 00:17:34,940 ‫wirklich abgeschlossen ist. 306 00:17:34,940 --> 00:17:38,940 ‫Denn ansonsten bitte anfragen. Karosserie. Bilder werden leer 307 00:17:38,940 --> 00:17:42,030 ‫sein und unsere Dateinamen werden dann natürlich nicht 308 00:17:42,030 --> 00:17:44,633 ‫im aktuellen Tourdokument gespeichert, in Ordnung? 309 00:17:45,580 --> 00:17:47,710 ‫Und damit ist der Teil 310 00:17:47,710 --> 00:17:51,450 ‫dieses Abschnitts zum Hochladen von Bildern oder Dateien abgeschlossen. 311 00:17:51,450 --> 00:17:53,290 ‫Also ich hoffe, das hat Spaß 312 00:17:53,290 --> 00:17:55,850 ‫gemacht, ich weiß, dass es für mich wirklich cool war. 313 00:17:55,850 --> 00:17:58,130 ‫Also ich mag diese Art von 314 00:17:58,130 --> 00:18:02,570 ‫Sachen sehr, wodurch sich meine Anwendungen wie eine wirklich reale Welt anfühlen. 315 00:18:02,570 --> 00:18:04,470 ‫Wie auch immer, ich hoffe es hat euch 316 00:18:04,470 --> 00:18:06,163 ‫gefallen und wir sehen uns im nächsten.