1 00:00:01,290 --> 00:00:03,840 ‫Dozent: Lassen Sie uns nun 2 00:00:03,840 --> 00:00:07,883 ‫Benutzern erlauben, ihre Fotos direkt auf unserer Website hochzuladen. 3 00:00:09,610 --> 00:00:11,640 ‫Und das ist es, was wir wollen. 4 00:00:11,640 --> 00:00:13,760 ‫Wenn wir hier klicken, möchten wir 5 00:00:13,760 --> 00:00:15,915 ‫im Grunde ein neues Fenster öffnen, für 6 00:00:15,915 --> 00:00:19,370 ‫das wir ein neues Bild zum Hochladen auswählen können. Wenn wir 7 00:00:19,370 --> 00:00:21,380 ‫dann auf diese Schaltfläche klicken 8 00:00:21,380 --> 00:00:23,990 ‫und ein Formular senden, möchten wir natürlich dieses 9 00:00:23,990 --> 00:00:27,520 ‫Bild in unser Backend hochladen und den Benutzer aktualisieren , Rechts. 10 00:00:27,520 --> 00:00:29,528 ‫Der erste Schritt dazu 11 00:00:29,528 --> 00:00:33,400 ‫besteht darin, unserem HTML-Code ein neues Eingabeelement hinzuzufügen. 12 00:00:33,400 --> 00:00:35,490 ‫Also im Grunde zu unserer Paketvorlage, die 13 00:00:35,490 --> 00:00:37,850 ‫es dann ermöglicht, die Dateiauswahl zu öffnen, 14 00:00:37,850 --> 00:00:39,503 ‫wenn wir hier klicken. 15 00:00:40,930 --> 00:00:43,800 ‫Kommen wir also zu unseren 16 00:00:43,800 --> 00:00:48,800 ‫Ansichten und zur Rechenschaftslegung. In diesem Formular müssen wir 17 00:00:49,010 --> 00:00:51,720 ‫nun diese Eingabe hinzufügen. 18 00:00:51,720 --> 00:00:55,420 ‫Im Moment haben wir also diesen Link hier, der ein neues Foto sagt. 19 00:00:55,420 --> 00:00:58,800 ‫Aber natürlich ist es kein Link, den wir verwenden werden. 20 00:00:58,800 --> 00:01:01,280 ‫Das war also wirklich nur ein Platzhalter. 21 00:01:01,280 --> 00:01:03,360 ‫Also lass es uns loswerden. 22 00:01:03,360 --> 00:01:05,063 ‫Was wir also brauchen, ist ein Input. 23 00:01:06,280 --> 00:01:07,803 ‫Aus, um Datei einzugeben. 24 00:01:09,955 --> 00:01:13,110 ‫Alles klar, also zuvor hatten wir für den 25 00:01:13,110 --> 00:01:15,980 ‫Namen eine Eingabe mit dem Typ Text. 26 00:01:15,980 --> 00:01:19,040 ‫Wir haben auch eine Eingabe mit der Art 27 00:01:19,040 --> 00:01:22,925 ‫der E-Mail und es gibt auch eine spezielle für das Passwort. 28 00:01:22,925 --> 00:01:26,210 ‫Also Eingabe für Passwort und 29 00:01:26,210 --> 00:01:30,283 ‫für Dateien gibt es natürlich eine für Dateien. 30 00:01:31,380 --> 00:01:35,263 ‫Wir können dann angeben, welche Art von Datei wir tatsächlich akzeptieren. 31 00:01:38,920 --> 00:01:40,950 ‫Und wir können so etwas tun. 32 00:01:40,950 --> 00:01:43,410 ‫Bild und dann alle. 33 00:01:43,410 --> 00:01:46,210 ‫Es werden also grundsätzlich alle Formate 34 00:01:46,210 --> 00:01:49,010 ‫akzeptiert, die einen mit Bild 35 00:01:49,010 --> 00:01:50,823 ‫beginnenden Denktyp haben. 36 00:01:53,054 --> 00:01:55,780 ‫Geben wir diesem nun auch hier 37 00:01:55,780 --> 00:01:59,930 ‫einen Klassennamen, damit es auf unserer Seite schön formatiert erscheint. 38 00:01:59,930 --> 00:02:03,660 ‫Dies ist also der Klassenname, den ich in meiner CSS habe. 39 00:02:03,660 --> 00:02:06,940 ‫Und jetzt auch eine ID geben, damit wir sie dann 40 00:02:06,940 --> 00:02:08,440 ‫in Java-Skript auswählen können. 41 00:02:09,300 --> 00:02:12,690 ‫Fügen Sie das als Foto hinzu und schließlich geben wir 42 00:02:12,690 --> 00:02:15,840 ‫ihm wie die anderen Felder auch einen Namen. 43 00:02:15,840 --> 00:02:20,420 ‫Also auch Name des Fotos. 44 00:02:20,420 --> 00:02:23,093 ‫Und natürlich ist es ein Foto, denn das 45 00:02:23,093 --> 00:02:25,680 ‫ist der Name, den wir in unserem 46 00:02:25,680 --> 00:02:29,063 ‫Benutzerdokument haben und es ist auch der Feldname, den Multer erwartet. 47 00:02:30,106 --> 00:02:34,410 ‫Das hier ist also Upload und dann geben wir auch noch ein Label 48 00:02:34,410 --> 00:02:35,483 ‫dafür an. 49 00:02:37,650 --> 00:02:40,293 ‫Und wir setzen es auf 50 00:02:40,293 --> 00:02:44,110 ‫vier und dann die ID des Eingabeelements, in Ordnung. 51 00:02:44,110 --> 00:02:45,570 ‫Ich bin mir also nicht 52 00:02:45,570 --> 00:02:47,890 ‫sicher, ob Sie damit vertraut sind, wie das in HTML 53 00:02:47,890 --> 00:02:49,640 ‫funktioniert, aber es ist auch nicht wirklich wichtig. 54 00:02:51,329 --> 00:02:53,600 ‫Wenn wir also hier auf dieses 55 00:02:53,600 --> 00:02:56,320 ‫Label klicken, wird tatsächlich das Eingabeelement aktiviert, 56 00:02:56,320 --> 00:02:58,610 ‫das die ID hat, die wir 57 00:02:58,610 --> 00:03:00,500 ‫hier im Formular angeben. 58 00:03:00,500 --> 00:03:03,870 ‫In diesem Fall ist das also das Foto, in Ordnung. 59 00:03:03,870 --> 00:03:05,343 ‫Und tatsächlich ist es 60 00:03:05,343 --> 00:03:09,403 ‫dieses Label hier, bei dem der Text ein neues Foto auswählen wird. 61 00:03:11,030 --> 00:03:12,950 ‫Wenn wir dann auf das Label 62 00:03:12,950 --> 00:03:14,597 ‫klicken, wird diese Eingabe 63 00:03:14,597 --> 00:03:16,830 ‫aktiviert, wodurch wiederum das Fenster geöffnet wird, 64 00:03:16,830 --> 00:03:18,913 ‫in dem wir eine Datei auswählen können. 65 00:03:20,060 --> 00:03:23,090 ‫Und das ist alles, was wir für die Eingabe hier tun müssen. 66 00:03:23,090 --> 00:03:26,290 ‫Nach wie vor gibt es zwei Möglichkeiten, diese 67 00:03:26,290 --> 00:03:28,710 ‫Daten an den Server zu senden. 68 00:03:28,710 --> 00:03:31,480 ‫Also zunächst ohne die API, wie wir es in einem 69 00:03:31,480 --> 00:03:32,840 ‫früheren Vortrag getan haben. 70 00:03:32,840 --> 00:03:35,470 ‫Wir finden bereits die Aktion, die wir durchführen 71 00:03:35,470 --> 00:03:37,370 ‫möchten, und auch die Methode. 72 00:03:37,370 --> 00:03:38,760 ‫Und damit werden die 73 00:03:38,760 --> 00:03:41,180 ‫Daten dann direkt an den Server gesendet. 74 00:03:41,180 --> 00:03:43,130 ‫Wenn wir nun eine Datei mit 75 00:03:43,130 --> 00:03:45,440 ‫dieser Methode senden wollten, müssten wir hier 76 00:03:45,440 --> 00:03:47,220 ‫eine andere Option angeben. 77 00:03:47,220 --> 00:03:49,801 ‫Und das ist der enc-Typ. 78 00:03:49,801 --> 00:03:54,520 ‫Der enc-Typ müsste also aus mehrteiligen Formulardaten bestehen. 79 00:03:54,520 --> 00:03:59,520 ‫Also mehrteilige Schrägstrich-Formulardaten, in Ordnung. 80 00:04:02,530 --> 00:04:06,090 ‫Und so haben wir auch hier wieder diesen Namen mehrteilig. 81 00:04:06,090 --> 00:04:07,948 ‫Wie bereits erwähnt, dient 82 00:04:07,948 --> 00:04:11,220 ‫Multipart immer zum Senden von Dateien an den Server. 83 00:04:11,220 --> 00:04:13,864 ‫Und wieder brauchen wir tatsächlich die 84 00:04:13,864 --> 00:04:17,164 ‫Multer-Middleware, um diese mehrteiligen Formulardaten zu verarbeiten, in Ordnung. 85 00:04:17,164 --> 00:04:20,650 ‫Und eigentlich kommt der Name Multer von mehrteilig. 86 00:04:20,650 --> 00:04:23,317 ‫Also mult, mult, okay. 87 00:04:23,317 --> 00:04:26,830 ‫Wie auch immer, wenn wir die Daten ohne 88 00:04:26,830 --> 00:04:29,320 ‫API senden wollten, müssten wir immer 89 00:04:29,320 --> 00:04:31,200 ‫diesen Enc-Typ angeben. 90 00:04:31,200 --> 00:04:33,740 ‫Andernfalls würde das Formular die Datei einfach 91 00:04:33,740 --> 00:04:35,623 ‫ignorieren und nicht senden, okay. 92 00:04:35,623 --> 00:04:38,370 ‫Aber wie wir bereits wissen, 93 00:04:38,370 --> 00:04:41,780 ‫verwenden wir es tatsächlich mit der API, richtig. 94 00:04:41,780 --> 00:04:44,727 ‫Wir müssen diesen enc-Typ also 95 00:04:44,727 --> 00:04:48,630 ‫nicht angeben, sondern müssen dies programmgesteuert tun. 96 00:04:48,630 --> 00:04:51,382 ‫Also lassen Sie uns das tatsächlich tun. 97 00:04:51,382 --> 00:04:54,180 ‫Lassen Sie uns nun unsere Daten senden, einschließlich 98 00:04:54,180 --> 00:04:56,920 ‫natürlich des Fotos, indem wir einen API-Aufruf 99 00:04:56,920 --> 00:04:59,970 ‫durchführen, wie wir es im letzten Abschnitt getan haben. 100 00:04:59,970 --> 00:05:04,100 ‫Und so müssen wir jetzt in unserem öffentlichen Ordner öffnen und von 101 00:05:04,100 --> 00:05:08,973 ‫deren js aus öffnen wir index. js. 102 00:05:10,360 --> 00:05:13,560 ‫Und genau hier senden wir 103 00:05:13,560 --> 00:05:17,010 ‫die zu aktualisierenden Daten auf den Server. 104 00:05:17,010 --> 00:05:19,260 ‫Nun, wir senden sie nicht 105 00:05:19,260 --> 00:05:21,960 ‫wirklich hierher, sondern wählen sie aus dem Formular 106 00:05:21,960 --> 00:05:24,790 ‫aus und übergeben sie dann an die Update-Einstellungen. 107 00:05:24,790 --> 00:05:27,260 ‫In Ordnung, aber erinnern Sie sich 108 00:05:27,260 --> 00:05:29,590 ‫jetzt daran, wie ich sagte, 109 00:05:29,590 --> 00:05:32,660 ‫dass wir mehrteilige Formulardaten programmgesteuert neu erstellen müssen? 110 00:05:32,660 --> 00:05:34,893 ‫Und deshalb müssen wir es so machen. 111 00:05:42,020 --> 00:05:46,740 ‫Nennen wir es Formular und dann neue Formulardaten. 112 00:05:48,580 --> 00:05:51,200 ‫In Ordnung, und jetzt müssen wir 113 00:05:51,200 --> 00:05:53,883 ‫in diesem Formular immer wieder neue Daten anhängen. 114 00:05:53,883 --> 00:05:57,152 ‫Und grundsätzlich ein Append für jede der Daten, 115 00:05:57,152 --> 00:05:59,143 ‫die wir senden möchten. 116 00:06:00,370 --> 00:06:04,400 ‫Also formen. anhängen und der erste ist der Name. 117 00:06:04,400 --> 00:06:08,250 ‫Also geben wir hier name an und dann den Wert des Namens. 118 00:06:08,250 --> 00:06:11,000 ‫Und das ist natürlich dieser hier. 119 00:06:11,000 --> 00:06:15,363 ‫Also greifen wir das, fügen Sie es hier ein und duplizieren Sie es. 120 00:06:16,870 --> 00:06:19,653 ‫Und als nächstes kommt die E-Mail, okay. 121 00:06:20,690 --> 00:06:24,580 ‫Dann lassen Sie uns das loswerden, geben Sie in die Update-Einstellungen ein. 122 00:06:24,580 --> 00:06:28,040 ‫Wir übergeben dann das Formular, okay. 123 00:06:28,040 --> 00:06:30,560 ‫Und oder ein Textaufruf mit 124 00:06:30,560 --> 00:06:32,350 ‫axios erkennt dieses 125 00:06:32,350 --> 00:06:34,480 ‫Formular hier tatsächlich als 126 00:06:34,480 --> 00:06:37,550 ‫Objekt und funktioniert wie zuvor, okay. 127 00:06:37,550 --> 00:06:39,900 ‫Hier in den Update-Einstellungen, wo 128 00:06:39,900 --> 00:06:42,178 ‫wir die Daten übergeben, 129 00:06:42,178 --> 00:06:44,980 ‫die dann hier in die axios-Anfrage übergeben 130 00:06:44,980 --> 00:06:47,543 ‫werden, müssen wir also nichts ändern. 131 00:06:49,090 --> 00:06:51,810 ‫Okay, das entspricht also dem, was wir vorher mit 132 00:06:51,810 --> 00:06:54,380 ‫Name und E-Mail hatten, aber jetzt fügen wir 133 00:06:54,380 --> 00:06:57,050 ‫natürlich auch das Foto hinzu, was der einzige 134 00:06:57,050 --> 00:06:59,380 ‫Grund ist, warum wir es jetzt 135 00:06:59,380 --> 00:07:00,580 ‫so machen müssen. 136 00:07:02,590 --> 00:07:07,590 ‫Also formen. dann nochmal den namen anhängen wir 137 00:07:07,650 --> 00:07:10,400 ‫wollen es natürlich nochmal anhängen, foto und 138 00:07:12,093 --> 00:07:12,970 ‫dann dokumentieren. getelementbyid, 139 00:07:14,176 --> 00:07:22,930 ‫das auch ein Foto ist, aber jetzt nicht mehr. Wert, sondern . 140 00:07:22,930 --> 00:07:22,930 ‫Dateien, alles klar. 141 00:07:22,930 --> 00:07:25,920 ‫Und diese Dateien befinden 142 00:07:25,920 --> 00:07:28,170 ‫sich tatsächlich im Array, und da es 143 00:07:28,170 --> 00:07:30,260 ‫nur eine gibt, müssen wir das 144 00:07:30,260 --> 00:07:33,260 ‫erste Element im Array auswählen, und das ist null. 145 00:07:33,260 --> 00:07:34,733 ‫Alles klar, und loggen 146 00:07:36,880 --> 00:07:40,810 ‫wir dieses Formular tatsächlich in die Konsole ein, bis wir einen kurzen Blick darauf 147 00:07:40,810 --> 00:07:42,340 ‫werfen, was dieses Formular tatsächlich ist. 148 00:07:43,360 --> 00:07:45,870 ‫Aber kurz gesagt, wie ich bereits sagte, erstellen 149 00:07:45,870 --> 00:07:48,280 ‫wir diese mehrteiligen Formulardaten im Grunde neu. 150 00:07:48,280 --> 00:07:52,480 ‫Und deshalb heißt es eigentlich Formulardaten, weil 151 00:07:52,480 --> 00:07:55,200 ‫Formulardaten auch hier 152 00:07:55,200 --> 00:07:58,640 ‫in diesem mehrteiligen Enc-Typ vorliegen, okay. 153 00:07:58,640 --> 00:08:02,173 ‫Also, ich denke, das reicht uns eigentlich, 154 00:08:03,750 --> 00:08:06,450 ‫um das jetzt auszuprobieren. 155 00:08:06,450 --> 00:08:08,670 ‫Wie gesagt, in den Update-Einstellungen müssen 156 00:08:08,670 --> 00:08:10,860 ‫wir nichts ändern und auch den 157 00:08:10,860 --> 00:08:13,030 ‫Update me-Endpunkt, an den 158 00:08:13,030 --> 00:08:15,320 ‫wir dieses Anforderungstool senden, damit dieses 159 00:08:15,320 --> 00:08:18,630 ‫auch bereits funktioniert und bereit ist, Bilder zu akzeptieren 160 00:08:18,630 --> 00:08:21,040 ‫und sogar die Größe zu ändern, richtig. 161 00:08:21,040 --> 00:08:25,230 ‫Und so lassen Sie uns jetzt weitermachen und dies versuchen. 162 00:08:25,230 --> 00:08:28,319 ‫Und so lasst uns das noch einmal neu laden. 163 00:08:28,319 --> 00:08:32,050 ‫Also mal sehen, und tatsächlich 164 00:08:32,050 --> 00:08:36,031 ‫bekommen wir jetzt unsere Dateiauswahl im Grunde. 165 00:08:36,031 --> 00:08:38,450 ‫Dieses Fenster, in dem wir jetzt die 166 00:08:38,450 --> 00:08:40,550 ‫Datei auswählen können und was ich 167 00:08:40,550 --> 00:08:42,370 ‫tun werde, besteht darin, im 168 00:08:42,370 --> 00:08:45,620 ‫Grunde das Originalbild zurückzusetzen, das wir für diesen Benutzer hatten. 169 00:08:45,620 --> 00:08:47,730 ‫Das ist also auf 170 00:08:47,730 --> 00:08:52,513 ‫Desktop, Natours, Public, Image-Benutzer, und es war Benutzer 11, also dieser. 171 00:08:54,060 --> 00:08:58,700 ‫Und das ist jetzt hochgeladen. 172 00:08:58,700 --> 00:09:00,050 ‫Also öffnen, in den Einstellungen speichern und die Datenaktualisierung ist erfolgreich. 173 00:09:01,940 --> 00:09:06,940 ‫Jetzt spiegelt es sich hier nicht sofort wieder. 174 00:09:07,780 --> 00:09:10,180 ‫Weder hier noch hier oben, aber 175 00:09:10,180 --> 00:09:13,280 ‫es sollte so sein, sobald wir diese Seite hochladen. 176 00:09:13,280 --> 00:09:15,393 ‫Und wir könnten es zwar auch 177 00:09:16,410 --> 00:09:19,540 ‫mit Java-Script machen, aber das ist eigentlich viel Arbeit. 178 00:09:19,540 --> 00:09:21,620 ‫Ich hatte es versucht und ich habe 179 00:09:21,620 --> 00:09:23,740 ‫es getan, aber dann dachte ich, dass es einfach 180 00:09:23,740 --> 00:09:26,800 ‫zu viel Arbeit ist und es nicht wert ist, es hier umzusetzen. 181 00:09:26,800 --> 00:09:29,630 ‫Aber wie auch immer, nur um zu testen, ob es tatsächlich 182 00:09:29,630 --> 00:09:32,040 ‫funktioniert, müssen wir die Seite jetzt neu laden. 183 00:09:32,040 --> 00:09:34,320 ‫Und es tat. 184 00:09:34,320 --> 00:09:35,840 ‫Hier ist nun das neue Bild, das wir gerade hochgeladen haben. 185 00:09:35,840 --> 00:09:39,320 ‫So großartig. 186 00:09:39,320 --> 00:09:41,450 ‫Werfen wir einen Blick auf den Ordner selbst. 187 00:09:41,450 --> 00:09:44,210 ‫Wenn es auch tatsächlich da ist und 188 00:09:44,210 --> 00:09:46,530 ‫ob es richtig transformiert wurde. 189 00:09:46,530 --> 00:09:48,810 ‫Das ist also ein Bild. 190 00:09:48,810 --> 00:09:52,030 ‫Laden wir es hier neu. 191 00:09:52,030 --> 00:09:53,293 ‫Und jetzt bin ich mir nicht sicher, welches es ist. 192 00:09:57,240 --> 00:09:59,663 ‫Ach genau. 193 00:10:00,890 --> 00:10:02,690 ‫Also 500 mal 500 194 00:10:02,690 --> 00:10:07,200 ‫und jetzt ist es komplett unscharf, weil das Originalbild viel kleiner war. 195 00:10:07,200 --> 00:10:10,440 ‫Aber egal, das ist völlig egal. 196 00:10:10,440 --> 00:10:12,643 ‫Wichtig ist, dass wir 197 00:10:13,910 --> 00:10:17,570 ‫jetzt tatsächlich Fotos direkt aus diesem Formular hochladen können. 198 00:10:17,570 --> 00:10:19,830 ‫Ich möchte das ist alles, um einen Blick 199 00:10:19,830 --> 00:10:22,480 ‫auf unsere Konsole hier auf die Formulardaten zu werfen, 200 00:10:22,480 --> 00:10:27,480 ‫von denen ich dachte, dass wir sie protokolliert hätten und die hier nicht erschienen sind, weil wir 201 00:10:27,546 --> 00:10:29,530 ‫die Seite bereits neu geladen haben. 202 00:10:29,530 --> 00:10:32,184 ‫Aber wie auch immer, ich wollte das andere Bild hierher zurückstellen. 203 00:10:32,184 --> 00:10:36,543 ‫Also diejenige, die wir zuvor hochgeladen haben und die in 204 00:10:39,290 --> 00:10:41,820 ‫dev-data, image und aarav ist. 205 00:10:41,820 --> 00:10:46,820 ‫Alles klar, Daten erfolgreich aktualisiert. 206 00:10:50,040 --> 00:10:53,340 ‫Schauen wir uns hier kurz unsere Telefondaten an. 207 00:10:53,340 --> 00:10:56,760 ‫Ah, aber ich denke, wir können nicht wirklich sehen, was wir hier haben. 208 00:10:56,760 --> 00:11:00,173 ‫Mal sehn. 209 00:11:01,100 --> 00:11:02,223 ‫Nein, wir können nicht wirklich sehen, was wir haben. 210 00:11:04,045 --> 00:11:06,689 ‫Okay, ich habe mir das nie angeschaut. 211 00:11:06,689 --> 00:11:09,160 ‫Und ich dachte, wir könnten die Informationen vielleicht 212 00:11:09,160 --> 00:11:10,110 ‫sehen, aber egal. 213 00:11:10,110 --> 00:11:12,850 ‫Wichtig ist, dass es tatsächlich funktioniert hat. 214 00:11:12,850 --> 00:11:16,170 ‫Also, wenn wir jetzt neu laden, dann ist dieses 215 00:11:16,170 --> 00:11:18,191 ‫ältere Image natürlich wieder da. 216 00:11:18,191 --> 00:11:21,940 ‫Großartig, also fühlt sich diese Anwendung wieder mehr 217 00:11:21,940 --> 00:11:25,000 ‫und mehr nach echter Arbeit an.