1 00:00:01,170 --> 00:00:03,440 ‫Sprecher: Im ersten Teil dieses 2 00:00:03,440 --> 00:00:06,140 ‫Abschnitts werden wir alles über das Hochladen 3 00:00:06,140 --> 00:00:09,660 ‫von Bildern mit dem Multer-Paket erfahren und in diesem 4 00:00:09,660 --> 00:00:13,653 ‫speziellen Video beginnen wir mit der Implementierung von Bild-Uploads für Benutzerfotos. 5 00:00:15,230 --> 00:00:18,900 ‫Aber bevor wir anfangen, lasst uns hier kurz 6 00:00:18,900 --> 00:00:22,450 ‫aufräumen und diese ständige Ausgabe der Cookies, die 7 00:00:22,450 --> 00:00:24,570 ‫wir hier haben, loswerden. 8 00:00:24,570 --> 00:00:29,093 ‫Das ist also irgendwo hier unten und das ist viel besser. 9 00:00:30,430 --> 00:00:33,610 ‫Jetzt werden wir daran arbeiten, Benutzerfotos hochzuladen 10 00:00:33,610 --> 00:00:38,010 ‫und lassen Sie uns hier die Benutzerrouten öffnen, in Ordnung. 11 00:00:38,010 --> 00:00:41,310 ‫Multer ist also eine sehr beliebte Middleware für die Verarbeitung 12 00:00:41,310 --> 00:00:45,510 ‫mehrteiliger Formulardaten, bei denen es sich um ein Formular in der Codierung handelt, das 13 00:00:45,510 --> 00:00:48,540 ‫zum Hochladen von Dateien aus einem Formular verwendet wird. 14 00:00:48,540 --> 00:00:51,200 ‫Denken Sie also daran, wie wir im 15 00:00:51,200 --> 00:00:55,160 ‫letzten Abschnitt ein URL-codiertes Formular verwendet haben, um Benutzerdaten zu aktualisieren, 16 00:00:55,160 --> 00:00:58,570 ‫und dafür mussten wir auch eine spezielle Middleware einbinden. 17 00:00:58,570 --> 00:01:01,000 ‫Multer ist also im 18 00:01:01,000 --> 00:01:03,580 ‫Grunde eine Middleware für mehrteilige Formulardaten. 19 00:01:03,580 --> 00:01:05,770 ‫Und jetzt werden wir Folgendes tun. 20 00:01:05,770 --> 00:01:08,460 ‫Wir werden es dem Benutzer ermöglichen, 21 00:01:08,460 --> 00:01:11,064 ‫ein Foto auf der Update 22 00:01:11,064 --> 00:01:14,430 ‫Me-Route hochzuladen, sodass Benutzer nicht nur E-Mail 23 00:01:14,430 --> 00:01:18,620 ‫und Foto aktualisieren können, sondern auch ihre Benutzerfotos hochladen können. 24 00:01:18,620 --> 00:01:21,970 ‫Beginnen wir also noch einmal damit, 25 00:01:21,970 --> 00:01:25,330 ‫das von uns benötigte Paket zu installieren und 26 00:01:25,330 --> 00:01:30,267 ‫hier tatsächlich ein neues Terminalfenster zu erstellen, und so installiert NPM Multer. 27 00:01:32,586 --> 00:01:37,437 ‫Alles klar und hier sehen wir, dass wir auf Multer 1 sind. 4. 1. 28 00:01:38,420 --> 00:01:41,160 ‫Falls Sie mit diesem Paket Probleme haben, stellen 29 00:01:41,160 --> 00:01:43,490 ‫Sie bitte sicher, dass Sie die 30 00:01:43,490 --> 00:01:45,983 ‫gleiche Version installieren, die ich hier verwende. 31 00:01:47,241 --> 00:01:48,074 ‫Gut. 32 00:01:49,150 --> 00:01:51,313 ‫Also, lass uns das hier aufnehmen. 33 00:01:52,930 --> 00:01:57,070 ‫Also Multer, verlangen, Multer. 34 00:01:58,840 --> 00:02:03,040 ‫Also, einfach und jetzt müssen wir einen sogenannten 35 00:02:03,040 --> 00:02:05,780 ‫Multer-Upload konfigurieren und dann verwenden. 36 00:02:05,780 --> 00:02:08,030 ‫Und lassen Sie uns das gleich hier 37 00:02:09,330 --> 00:02:14,330 ‫am Anfang machen und nennen wir es Upload und wir rufen die Multer-Funktion auf, die 38 00:02:16,380 --> 00:02:19,090 ‫wir gerade zuvor eingefügt haben, und übergeben dann 39 00:02:19,090 --> 00:02:21,160 ‫ein Objekt für einige Optionen. 40 00:02:21,160 --> 00:02:23,730 ‫Und im Moment ist die einzige 41 00:02:23,730 --> 00:02:26,180 ‫Option, die wir angeben werden, 42 00:02:26,180 --> 00:02:31,180 ‫das Ziel, und ich werde es auf Public/image/users setzen, in Ordnung. 43 00:02:34,940 --> 00:02:36,870 ‫Und das ist genau der 44 00:02:36,870 --> 00:02:38,780 ‫Ordner, in dem wir alle 45 00:02:38,780 --> 00:02:40,570 ‫hochgeladenen Bilder speichern möchten. 46 00:02:40,570 --> 00:02:45,570 ‫Das ist also hier, Öffentlich, Bild und Benutzer, wie zum Beispiel alle 47 00:02:45,740 --> 00:02:48,063 ‫Bilder für alle Benutzer, die 48 00:02:48,063 --> 00:02:50,750 ‫wir bereits in unserer Datenbank haben. 49 00:02:50,750 --> 00:02:53,770 ‫Richtig und natürlich können wir das viel komplexer 50 00:02:53,770 --> 00:02:56,480 ‫konfigurieren und das werden wir in unserem 51 00:02:56,480 --> 00:02:58,670 ‫nächsten Vortrag tun, aber 52 00:02:58,670 --> 00:03:02,190 ‫jetzt möchte ich wirklich, dass Sie dieses Paket nur 53 00:03:02,190 --> 00:03:04,697 ‫vorstellen und übrigens hätten wir eigentlich 54 00:03:04,697 --> 00:03:08,010 ‫einfach anrufen können die Multer-Funktion ohne irgendwelche Optionen drin. 55 00:03:08,010 --> 00:03:10,940 ‫Ohne dies würde also hier und da das hochgeladene 56 00:03:10,940 --> 00:03:13,749 ‫Bild einfach im Speicher abgelegt und nirgendwo auf 57 00:03:13,749 --> 00:03:17,590 ‫der Disc gespeichert, aber das ist an dieser Stelle natürlich nicht das, 58 00:03:17,590 --> 00:03:21,290 ‫was wir wollen und daher müssen wir zumindest diese Zieloption angeben. 59 00:03:21,290 --> 00:03:23,620 ‫Und damit wird unsere Datei dann 60 00:03:23,620 --> 00:03:26,450 ‫wirklich in ein Verzeichnis in unserem Dateisystem hochgeladen. 61 00:03:26,450 --> 00:03:29,080 ‫Und ich habe das schon erwähnt, aber 62 00:03:29,080 --> 00:03:31,960 ‫stellen wir einfach sicher, dass wir diesbezüglich auf der 63 00:03:31,960 --> 00:03:34,870 ‫gleichen Seite sind, was bedeutet, dass Bilder natürlich nicht 64 00:03:34,870 --> 00:03:37,770 ‫direkt in die Datenbank hochgeladen werden, wir laden sie 65 00:03:37,770 --> 00:03:40,700 ‫einfach in unser Dateisystem und dann in die Datenbank wir 66 00:03:40,700 --> 00:03:43,510 ‫Setzen Sie im Grunde einen Link zu diesem Bild. 67 00:03:43,510 --> 00:03:46,170 ‫In diesem Fall müssen wir also 68 00:03:46,170 --> 00:03:49,450 ‫in jedem Benutzerdokument alle hochgeladenen Dateien benennen, okay. 69 00:03:49,450 --> 00:03:51,690 ‫Das machen wir in diesem Video wieder nicht, aber 70 00:03:51,690 --> 00:03:53,550 ‫wir werden es etwas später tun. 71 00:03:53,550 --> 00:03:55,603 ‫Lassen Sie uns das jetzt einfach zum Laufen bringen. 72 00:03:56,490 --> 00:03:59,000 ‫Wie auch immer, was wir jetzt tun müssen, 73 00:03:59,000 --> 00:04:02,150 ‫ist, diesen Upload hier zu verwenden, um wirklich eine Middleware-Funktion zu 74 00:04:02,150 --> 00:04:05,223 ‫erstellen, die wir hier in die Update Me-Route einfügen können. 75 00:04:06,100 --> 00:04:09,343 ‫Also hier, und es funktioniert so. 76 00:04:10,700 --> 00:04:14,670 ‫Also Upload, Punkt Single, und es ist Single, weil wir hier 77 00:04:14,670 --> 00:04:17,810 ‫nur ein einzelnes Bild aktualisieren möchten und dann hier 78 00:04:17,810 --> 00:04:20,830 ‫in Single den Namen des Felds übergeben, das 79 00:04:20,830 --> 00:04:22,993 ‫das hochzuladende Bild enthalten wird. 80 00:04:24,000 --> 00:04:26,480 ‫Und das wird ein Foto sein, okay. 81 00:04:26,480 --> 00:04:29,023 ‫Und mit Feld meine ich das Feld 82 00:04:29,023 --> 00:04:31,620 ‫im Formular, in das das Bild hochgeladen wird. 83 00:04:31,620 --> 00:04:34,400 ‫Alles klar, macht es Sinn? 84 00:04:34,400 --> 00:04:38,040 ‫Also haben wir wieder das Multer-Paket eingefügt 85 00:04:38,040 --> 00:04:41,560 ‫und dann einen Upload erstellt. 86 00:04:41,560 --> 00:04:44,700 ‫Und dieser Upload dient nur dazu, ein paar Einstellungen 87 00:04:44,700 --> 00:04:48,640 ‫zu definieren, wobei wir in diesem Beispiel nur das Ziel definieren und 88 00:04:48,640 --> 00:04:52,260 ‫dann diesen Upload verwenden, um eine neue Middleware zu erstellen, die 89 00:04:52,260 --> 00:04:55,560 ‫wir dann zu diesem Stapel der Route hinzufügen können, die 90 00:04:55,560 --> 00:04:58,400 ‫wir zum Hochladen der Datei verwenden möchten . 91 00:04:58,400 --> 00:05:01,130 ‫Dafür sagen wir Upload Dot Single, weil wir 92 00:05:01,130 --> 00:05:03,390 ‫nur eine einzelne Datei haben 93 00:05:03,390 --> 00:05:06,160 ‫und dann geben wir schließlich den Namen des 94 00:05:06,160 --> 00:05:08,570 ‫Feldes an, das diese Datei enthalten soll. 95 00:05:08,570 --> 00:05:11,600 ‫Okay, und diese Middleware kümmert sich dann darum, die 96 00:05:11,600 --> 00:05:14,610 ‫Datei zu übernehmen und sie im Wesentlichen an das 97 00:05:14,610 --> 00:05:16,960 ‫von uns angegebene Ziel zu kopieren. 98 00:05:16,960 --> 00:05:19,040 ‫Und danach ruft es natürlich die 99 00:05:19,040 --> 00:05:22,083 ‫nächste Middleware im Stack auf, die Update Me ist. 100 00:05:23,210 --> 00:05:26,470 ‫Außerdem wird diese Middleware hier die Datei oder zumindest 101 00:05:26,470 --> 00:05:28,600 ‫einige Informationen über die Datei 102 00:05:28,600 --> 00:05:30,810 ‫auf dem Anfrageobjekt ablegen, also sehen 103 00:05:30,810 --> 00:05:33,080 ‫wir uns das einmal genauer an. 104 00:05:33,080 --> 00:05:36,123 ‫Gehen wir also zur Funktion Update Me. 105 00:05:38,490 --> 00:05:42,320 ‫Also genau hier und gleich 106 00:05:43,300 --> 00:05:48,163 ‫hier am Anfang sagen wir Konsolenpunktprotokoll, Regpunktdatei. 107 00:05:49,630 --> 00:05:50,463 ‫Gut? 108 00:05:51,410 --> 00:05:55,430 ‫Und auch ich möchte einen Blick auf den Körper werfen. 109 00:05:55,430 --> 00:05:58,307 ‫Großartig und damit sind wir nun tatsächlich 110 00:05:58,307 --> 00:06:02,320 ‫bereit, dies zu testen und werden es vorerst in postman testen, 111 00:06:02,320 --> 00:06:04,820 ‫aber natürlich werden wir diese 112 00:06:04,820 --> 00:06:08,253 ‫Funktionalität später auch in das Formular einfügen, in Ordnung. 113 00:06:09,220 --> 00:06:13,720 ‫Gehen wir also zum Postboten hier und zu Update Me. 114 00:06:13,720 --> 00:06:16,023 ‫Also im Grunde um den aktuellen Benutzer zu aktualisieren. 115 00:06:17,380 --> 00:06:20,430 ‫Und der Benutzer, den ich aktualisieren möchte, heißt 116 00:06:20,430 --> 00:06:23,700 ‫Leo, also holen wir ihn von Compass hierher, oder 117 00:06:23,700 --> 00:06:26,710 ‫eigentlich denke ich, dass das nicht einmal notwendig 118 00:06:26,710 --> 00:06:30,460 ‫ist, da wir in unserem Login bereits eine solche E-Mail-Adresse haben 119 00:06:30,460 --> 00:06:35,010 ‫und seine E-Mail leo@example ist. com und 120 00:06:35,010 --> 00:06:38,090 ‫das Passwort ist immer gleich. 121 00:06:38,090 --> 00:06:41,390 ‫Und so müssen wir uns natürlich zuerst als Benutzer einloggen und 122 00:06:41,390 --> 00:06:44,653 ‫nun gehen wir weiter und aktualisieren dann auf den Benutzer. 123 00:06:46,620 --> 00:06:50,010 ‫Im Körper haben wir also den Namen und die Rolle. 124 00:06:50,010 --> 00:06:53,593 ‫Also lass uns nur aktualisieren, sagen wir hier den Namen. 125 00:06:54,560 --> 00:06:59,500 ‫Der aktuelle Name ist also Leo Gillespie oder Gillespie, ich weiß nicht, wie 126 00:06:59,500 --> 00:07:01,113 ‫ich das sagen soll. 127 00:07:02,800 --> 00:07:07,800 ‫Lass uns hier in der Mitte einfach etwas hinzufügen, okay. 128 00:07:07,870 --> 00:07:11,283 ‫Und jetzt geben wir endlich die Fotoeigenschaft 129 00:07:13,270 --> 00:07:16,370 ‫an, oder eigentlich sollten wir es 130 00:07:16,370 --> 00:07:21,100 ‫nicht so machen, sondern hier zu Formulardaten gehen, okay, denn 131 00:07:21,100 --> 00:07:22,810 ‫so können 132 00:07:22,810 --> 00:07:25,543 ‫wir mehrteilige Formulardaten senden, ok. 133 00:07:26,410 --> 00:07:31,410 ‫Kopieren wir also nur den Namen hier und es ist Name. 134 00:07:33,470 --> 00:07:37,813 ‫In Ordnung, hier ist der Schlüssel Name 135 00:07:37,813 --> 00:07:40,763 ‫und dann dieser Wert. 136 00:07:42,350 --> 00:07:46,770 ‫Als nächstes legen wir dann endlich das Fotofeld fest und dann 137 00:07:46,770 --> 00:07:50,210 ‫können wir hier eigentlich angeben, was wir wollen. 138 00:07:50,210 --> 00:07:52,700 ‫Anstelle von Text, der die Standardeinstellung ist, 139 00:07:52,700 --> 00:07:56,520 ‫können wir eine Datei angeben und dann hier die Datei auswählen, 140 00:07:56,520 --> 00:07:58,163 ‫die wir hochladen möchten. 141 00:07:59,240 --> 00:08:04,240 ‫Also diese Datei, dieses Bild, ist hier wieder in unseren Def-Daten, dann im 142 00:08:04,350 --> 00:08:07,470 ‫Bild und dann hier das Bild von Leo. 143 00:08:07,470 --> 00:08:10,430 ‫Und deshalb wird dieser Benutzer angezeigt. 144 00:08:10,430 --> 00:08:13,800 ‫Okay, klicken Sie auf "Öffnen" und ich denke, wir 145 00:08:13,800 --> 00:08:16,193 ‫können diese Anfrage jetzt senden. 146 00:08:17,960 --> 00:08:22,200 ‫Alles klar, wir waren erfolgreich und natürlich wurde das Foto wie 147 00:08:22,200 --> 00:08:25,880 ‫gesagt natürlich nicht hier in der Datenbankausgabe aktualisiert, weil 148 00:08:25,880 --> 00:08:28,450 ‫das für die nächste Vorlesung ist. 149 00:08:28,450 --> 00:08:31,630 ‫Im Moment möchten wir dieses Bild nur wirklich in 150 00:08:31,630 --> 00:08:33,803 ‫den von uns angegebenen Ordner hochladen. 151 00:08:34,960 --> 00:08:39,180 ‫In Ordnung, werfen wir jetzt auch einen Blick auf unsere 152 00:08:39,180 --> 00:08:43,430 ‫Ausgabe und hier haben wir eine Request-Dot-Datei, die diese ist, 153 00:08:43,430 --> 00:08:46,460 ‫und erhalten so alle möglichen Informationen darüber. 154 00:08:46,460 --> 00:08:50,910 ‫Also der ursprüngliche Name, das von uns angegebene Ziel, der 155 00:08:50,910 --> 00:08:54,370 ‫neue Dateiname hier und auch die Größe. 156 00:08:54,370 --> 00:08:57,980 ‫Okay, das ist also eine Punktdatei anfordern und dann denken Sie daran, dass 157 00:08:57,980 --> 00:08:59,920 ‫wir auch den Körper protokolliert haben. 158 00:08:59,920 --> 00:09:03,810 ‫Und so ist der Körper jetzt nur noch der Name, in Ordnung. 159 00:09:03,810 --> 00:09:07,100 ‫Unser Body-Parse ist also nicht wirklich in der Lage, mit 160 00:09:07,100 --> 00:09:09,470 ‫Dateien umzugehen, und deshalb wird die Datei 161 00:09:09,470 --> 00:09:11,790 ‫überhaupt nicht im Body angezeigt und 162 00:09:11,790 --> 00:09:15,920 ‫das ist natürlich der ganze Grund, warum wir das Multer-Paket tatsächlich brauchen. 163 00:09:15,920 --> 00:09:19,570 ‫Wie auch immer, lass uns jetzt einen Blick in unseren Ordner 164 00:09:19,570 --> 00:09:24,241 ‫werfen und hier haben wir also Bild, Benutzer und dann irgendwo hier sollte das Bild 165 00:09:24,241 --> 00:09:26,890 ‫sein, das wir gerade hochgeladen haben, aber ich 166 00:09:28,150 --> 00:09:30,160 ‫kann es hier nicht wirklich sehen. 167 00:09:30,160 --> 00:09:33,313 ‫Lassen Sie uns aktualisieren, ah und hier ist es tatsächlich. 168 00:09:34,960 --> 00:09:37,890 ‫Wenn wir also jetzt darauf klicken, können wir es nicht 169 00:09:37,890 --> 00:09:39,840 ‫wirklich sehen, denn wie Sie hier 170 00:09:39,840 --> 00:09:42,600 ‫sehen können, hat es nicht einmal eine Erweiterung, okay. 171 00:09:42,600 --> 00:09:46,240 ‫Deshalb können wir es an dieser Stelle nicht wirklich öffnen. 172 00:09:46,240 --> 00:09:49,690 ‫Die Datei ist also wirklich hier in unserem Ordner 173 00:09:49,690 --> 00:09:52,320 ‫aufgetaucht und der Upload funktioniert tatsächlich. 174 00:09:52,320 --> 00:09:54,870 ‫Nun, zumindest irgendwie, aber wir sind nicht wirklich 175 00:09:54,870 --> 00:09:57,350 ‫dort, wo wir es wollen, richtig. 176 00:09:57,350 --> 00:09:59,960 ‫Also wollen wir ihm einen besseren Dateinamen geben und 177 00:09:59,960 --> 00:10:02,100 ‫wir wollen auch diesen Code, den 178 00:10:02,100 --> 00:10:04,690 ‫wir an dieser Stelle haben, ein wenig umorganisieren. 179 00:10:04,690 --> 00:10:07,123 ‫Und das machen wir im nächsten Video.