1 00:00:01,310 --> 00:00:04,140 ‫-: In diesem Video lernen Sie die Bildbearbeitung 2 00:00:04,140 --> 00:00:06,930 ‫und -manipulation mit Node JS kennen, und in 3 00:00:06,930 --> 00:00:08,760 ‫diesem speziellen Fall werden 4 00:00:08,760 --> 00:00:11,193 ‫wir unsere Bilder skalieren und konvertieren. 5 00:00:12,760 --> 00:00:15,140 ‫Wir gehen also überall in unserer 6 00:00:15,140 --> 00:00:18,490 ‫Benutzeroberfläche davon aus, dass die hochgeladenen Bilder Quadrate sind. 7 00:00:18,490 --> 00:00:20,250 ‫Damit wir sie dann 8 00:00:20,250 --> 00:00:22,570 ‫als Kreise wie folgt darstellen können. 9 00:00:22,570 --> 00:00:25,400 ‫Dies funktioniert also nur, wenn es sich 10 00:00:25,400 --> 00:00:27,260 ‫um Quadrate handelt, aber 11 00:00:27,260 --> 00:00:30,535 ‫in der realen Welt werden Benutzer natürlich selten 12 00:00:30,535 --> 00:00:32,520 ‫Bilder hochladen, die Quadrate sind. 13 00:00:32,520 --> 00:00:34,600 ‫Unsere Aufgabe ist es jetzt, die 14 00:00:34,600 --> 00:00:37,850 ‫Größe der Bilder zu ändern, um sie quadratisch zu machen. 15 00:00:37,850 --> 00:00:41,300 ‫Okay, und so werden wir das machen. 16 00:00:41,300 --> 00:00:45,370 ‫Wir werden vor dem Update noch eine Middleware hinzufügen 17 00:00:45,370 --> 00:00:47,570 ‫und dann übernimmt 18 00:00:47,570 --> 00:00:49,920 ‫diese Middleware die eigentliche Bildverarbeitung. 19 00:00:49,920 --> 00:00:53,200 ‫Okay, also lass es uns hier im Code direkt 20 00:00:53,200 --> 00:00:54,470 ‫nach diesem machen, 21 00:00:54,470 --> 00:00:57,333 ‫weil sie irgendwie verbunden sind, nicht wahr? 22 00:00:58,610 --> 00:01:00,623 ‫Exportieren Sie also 23 00:01:01,690 --> 00:01:05,513 ‫Punkt, ändern Sie die Größe des Benutzerfotos. 24 00:01:13,250 --> 00:01:15,320 ‫Und bevor wir fortfahren, fügen 25 00:01:15,320 --> 00:01:18,160 ‫wir diese Middleware auf dieser speziellen Route tatsächlich 26 00:01:18,160 --> 00:01:19,523 ‫zum Middleware-Stack hinzu. 27 00:01:20,870 --> 00:01:22,673 ‫Das ist also in 28 00:01:23,860 --> 00:01:26,710 ‫Benutzerrouten, und hier, direkt nachdem das Foto 29 00:01:26,710 --> 00:01:27,923 ‫in diese 30 00:01:29,410 --> 00:01:32,470 ‫Middleware hochgeladen wurde, werden wir es dann skalieren. 31 00:01:32,470 --> 00:01:35,180 ‫Ändern Sie also die Größe, und hier ist 32 00:01:35,180 --> 00:01:36,603 ‫es tatsächlich der Benutzer-Controller. 33 00:01:41,130 --> 00:01:42,710 ‫In Ordung. 34 00:01:42,710 --> 00:01:44,060 ‫Lass uns hier 35 00:01:45,620 --> 00:01:47,320 ‫runter gehen und wieder zurück. 36 00:01:47,320 --> 00:01:49,480 ‫Und so haben wir zu diesem Zeitpunkt 37 00:01:49,480 --> 00:01:51,540 ‫bereits die Datei auf unsere Anfrage. 38 00:01:51,540 --> 00:01:53,500 ‫Zumindest wenn es einen Upload gab, 39 00:01:53,500 --> 00:01:55,000 ‫und wenn es keinen 40 00:01:55,000 --> 00:01:57,280 ‫Upload gab, dann wollen wir natürlich nichts machen. 41 00:01:57,280 --> 00:02:00,163 ‫Das bedeutet also, dass wir zur nächsten Middleware übergehen wollen. 42 00:02:01,090 --> 00:02:03,680 ‫Wenn es also keine Datei zu 43 00:02:05,230 --> 00:02:10,230 ‫der Anfrage gibt, kehren Sie sofort zurück und gehen Sie zum nächsten. 44 00:02:10,960 --> 00:02:13,380 ‫Okay, aber ansonsten wollen wir 45 00:02:13,380 --> 00:02:15,700 ‫natürlich die Bildgröße ändern. 46 00:02:15,700 --> 00:02:19,690 ‫Und dafür werden wir das scharfe Paket verwenden. 47 00:02:19,690 --> 00:02:20,890 ‫In Ordung. 48 00:02:20,890 --> 00:02:24,453 ‫Also, lass es uns zuerst einmal installieren. 49 00:02:25,630 --> 00:02:28,710 ‫Also MPM installieren Sie scharf. Okay, 50 00:02:32,190 --> 00:02:35,720 ‫und da das seine Arbeit tut, lassen Sie 51 00:02:35,720 --> 00:02:38,533 ‫uns das hier schon einfügen. 52 00:02:39,500 --> 00:02:40,463 ‫So 53 00:02:41,940 --> 00:02:45,600 ‫scharf, und erfordern, scharf. 54 00:02:45,600 --> 00:02:47,360 ‫Und Sharp ist eine wirklich schöne 55 00:02:47,360 --> 00:02:51,230 ‫und einfach zu verwendende Bildverarbeitungsbibliothek für Node Js. Und es gibt ziemlich 56 00:02:51,230 --> 00:02:52,590 ‫viele Dinge, die wir 57 00:02:52,590 --> 00:02:53,930 ‫damit machen können. 58 00:02:53,930 --> 00:02:55,970 ‫Aber wo es wirklich glänzt, 59 00:02:55,970 --> 00:02:59,150 ‫ist die Größenänderung von Bildern auf sehr einfache Weise. 60 00:02:59,150 --> 00:03:03,690 ‫Und genau das suchen wir hier. 61 00:03:03,690 --> 00:03:04,550 ‫In Ordung. 62 00:03:04,550 --> 00:03:08,590 ‫Also sagen wir scharf und dann müssen wir hier 63 00:03:08,590 --> 00:03:11,180 ‫im Grunde die Datei übergeben. 64 00:03:11,180 --> 00:03:13,990 ‫Wenn Sie nun eine solche Bildbearbeitung direkt nach 65 00:03:13,990 --> 00:03:16,120 ‫dem Hochladen einer Datei durchführen, 66 00:03:16,120 --> 00:03:19,310 ‫ist es immer am besten, die Datei nicht einmal auf 67 00:03:19,310 --> 00:03:22,770 ‫der Festplatte zu speichern, sondern sie stattdessen im Speicher zu speichern. 68 00:03:22,770 --> 00:03:24,580 ‫Darüber haben wir schon früher gesprochen, 69 00:03:24,580 --> 00:03:27,130 ‫und das macht man jetzt auch in der Praxis. 70 00:03:27,130 --> 00:03:29,930 ‫Okay, dafür müssen wir also 71 00:03:29,930 --> 00:03:32,830 ‫ein bisschen die Multer-Konfiguration ändern und 72 00:03:32,830 --> 00:03:35,230 ‫eigentlich nur diesen Multer-Speicher, 73 00:03:35,230 --> 00:03:38,703 ‫denn jetzt brauchen wir nichts mehr davon. 74 00:03:40,600 --> 00:03:42,453 ‫Und anstelle 75 00:03:45,700 --> 00:03:50,700 ‫von Multer-Speicher wird einfach Multer-Punkt-Speicher verwendet. 76 00:03:52,250 --> 00:03:54,810 ‫Und einfach so, okay? 77 00:03:54,810 --> 00:03:56,720 ‫Und wie ich bereits erwähnt 78 00:03:56,720 --> 00:04:00,730 ‫habe, wird das Bild auf diese Weise dann als Puffer gespeichert. 79 00:04:00,730 --> 00:04:03,080 ‫Und damit dieser Puffer dann auf 80 00:04:03,080 --> 00:04:07,820 ‫Anfrage verfügbar ist dot file dot buffer und das ist so viel 81 00:04:07,820 --> 00:04:10,500 ‫effizienter, also anstatt die Datei auf 82 00:04:10,500 --> 00:04:13,600 ‫die Festplatte zu schreiben und dann hier 83 00:04:13,600 --> 00:04:15,330 ‫erneut zu lesen. 84 00:04:15,330 --> 00:04:17,860 ‫Wir behalten das Bild einfach im Grunde im 85 00:04:17,860 --> 00:04:20,960 ‫Gedächtnis und dann können wir das hier lesen, in Ordnung? 86 00:04:20,960 --> 00:04:23,181 ‫Wie auch immer, wenn Sie die 87 00:04:23,181 --> 00:04:26,300 ‫Sharp-Funktion wie diese hier aufrufen, wird dann ein Objekt erstellt, 88 00:04:26,300 --> 00:04:29,750 ‫an dem wir mehrere Methoden verketten können, um unsere Bildverarbeitung durchzuführen. 89 00:04:29,750 --> 00:04:32,913 ‫Das erste, was wir tun werden, ist die Größenänderung. 90 00:04:34,040 --> 00:04:36,740 ‫Ändern Sie die Größe, und dann können wir hier die 91 00:04:36,740 --> 00:04:38,480 ‫Breite und die Höhe angeben. 92 00:04:38,480 --> 00:04:42,480 ‫Sagen wir also 500 und 500. Denken Sie also daran, 93 00:04:42,480 --> 00:04:44,780 ‫dass wir quadratische Bilder haben 94 00:04:44,780 --> 00:04:47,220 ‫möchten, und natürlich muss die Höhe 95 00:04:47,220 --> 00:04:48,770 ‫der Breite entsprechen. 96 00:04:48,770 --> 00:04:50,750 ‫Nun wird das Bild 97 00:04:50,750 --> 00:04:55,050 ‫so beschnitten, dass es die gesamten 500 mal 500 Quadrate bedeckt. 98 00:04:55,050 --> 00:04:56,400 ‫Und tatsächlich können 99 00:04:56,400 --> 00:04:59,130 ‫wir dieses Standardverhalten ändern, wenn wir möchten. 100 00:04:59,130 --> 00:05:01,320 ‫Werfen wir also noch einmal einen kurzen Blick 101 00:05:01,320 --> 00:05:02,563 ‫in die Dokumentation. 102 00:05:04,860 --> 00:05:09,053 ‫Sagen wir also, github scharf, aber eigentlich ist ihre 103 00:05:09,990 --> 00:05:12,100 ‫eigene Website ein 104 00:05:12,100 --> 00:05:14,440 ‫bisschen besser, ein bisschen vollständiger. 105 00:05:14,440 --> 00:05:18,360 ‫Also lasst uns hier auf diesen Link klicken, und dann 106 00:05:18,360 --> 00:05:20,770 ‫können wir hier zur Größenänderung kommen, was 107 00:05:20,770 --> 00:05:22,780 ‫wir gerade tun, und 108 00:05:22,780 --> 00:05:25,153 ‫dann habe ich gerade darüber gesprochen. 109 00:05:26,110 --> 00:05:29,130 ‫In Ordnung, die Standardeinstellung hier ist, dass 110 00:05:29,130 --> 00:05:31,070 ‫das Bild beschnitten 111 00:05:31,070 --> 00:05:33,610 ‫wird, um beide bereitgestellten Abmessungen abzudecken. 112 00:05:33,610 --> 00:05:38,610 ‫Wir können aber auch enthalten, füllen, innen oder außen wählen. 113 00:05:39,280 --> 00:05:43,310 ‫Und wir würden dies tun, indem wir die Optionen hier einstellen. 114 00:05:43,310 --> 00:05:46,700 ‫Wir können also Breite und Höhe festlegen und dann 115 00:05:46,700 --> 00:05:48,830 ‫als dritte Option dieses Optionsobjekt 116 00:05:48,830 --> 00:05:52,070 ‫festlegen, in dem wir dann die Passform definieren können. 117 00:05:52,070 --> 00:05:54,560 ‫Wir könnten auch die Position definieren, 118 00:05:54,560 --> 00:05:56,433 ‫die standardmäßig zentriert ist. 119 00:05:58,970 --> 00:06:00,653 ‫Sie sehen, es gibt alle 120 00:06:00,653 --> 00:06:03,420 ‫möglichen Dinge, die wir wirklich definieren könnten, um unsere 121 00:06:03,420 --> 00:06:04,670 ‫Bildverarbeitung zu verfeinern. 122 00:06:04,670 --> 00:06:07,653 ‫Aber in diesem Fall reicht das, was wir haben. 123 00:06:08,550 --> 00:06:10,720 ‫Kommen wir also zum nächsten Schritt. 124 00:06:10,720 --> 00:06:12,990 ‫Denn als nächstes möchte ich 125 00:06:12,990 --> 00:06:16,450 ‫die Bilder eigentlich immer in JPEG umwandeln, okay? 126 00:06:16,450 --> 00:06:18,863 ‫Und dafür verwenden wir to format 127 00:06:21,640 --> 00:06:23,463 ‫und dann jpeg. 128 00:06:25,000 --> 00:06:28,180 ‫Wir können dann auch die Qualität dieses JPEGs definieren. 129 00:06:28,180 --> 00:06:30,170 ‫Also im Grunde, um 130 00:06:30,170 --> 00:06:32,310 ‫es ein wenig zu komprimieren, 131 00:06:33,230 --> 00:06:36,900 ‫damit es nicht so viel Platz einnimmt, und dafür verwenden 132 00:06:36,900 --> 00:06:41,900 ‫wir die jpeg-Methode und setzen eine Option in diesem Objekt mit Qualität und 133 00:06:42,290 --> 00:06:45,043 ‫sagen wir hier 90 Prozent, in Ordnung? 134 00:06:46,910 --> 00:06:49,860 ‫Also jede Methode hier in eine eigene Zeile, 135 00:06:49,860 --> 00:06:53,210 ‫das ist viel schöner, aber eigentlich sind wir noch nicht fertig. 136 00:06:53,210 --> 00:06:56,020 ‫Wir sind fast fertig, aber nicht ganz. 137 00:06:56,020 --> 00:06:57,460 ‫Denn jetzt, am 138 00:06:57,460 --> 00:07:01,850 ‫Ende, wollen wir es dann endlich in eine Datei auf unserer Platte schreiben. 139 00:07:01,850 --> 00:07:04,913 ‫Und dafür können wir to file verwenden, jetzt 140 00:07:06,230 --> 00:07:08,550 ‫benötigt diese Methode hier 141 00:07:08,550 --> 00:07:10,940 ‫tatsächlich den gesamten Pfad zur Datei. 142 00:07:10,940 --> 00:07:13,180 ‫Also im Grunde 143 00:07:14,240 --> 00:07:17,440 ‫öffentliche Bilder, Schrägstrich, Benutzer und schließlich 144 00:07:17,440 --> 00:07:20,460 ‫hier der Dateiname, in Ordnung? 145 00:07:20,460 --> 00:07:21,990 ‫Also lasst uns das tatsächlich von 146 00:07:21,990 --> 00:07:23,550 ‫dem bekommen, was wir hier zuvor hatten. 147 00:07:23,550 --> 00:07:25,840 ‫Denn natürlich möchten wir, dass unsere Bilder 148 00:07:25,840 --> 00:07:27,183 ‫ein ähnliches Format haben. 149 00:07:29,520 --> 00:07:32,380 ‫Okay, also kopieren wir das. 150 00:07:32,380 --> 00:07:34,723 ‫Aber eigentlich werde ich es hier nicht richtig stellen. 151 00:07:35,790 --> 00:07:38,010 ‫Stattdessen werde ich es 152 00:07:38,010 --> 00:07:42,443 ‫tatsächlich speichern, um den Punktdateinamen der Punktdatei anzufordern. 153 00:07:43,490 --> 00:07:45,777 ‫Warum mache ich das jetzt so? 154 00:07:45,777 --> 00:07:48,280 ‫Nun, es liegt daran, dass dieser Dateiname 155 00:07:48,280 --> 00:07:50,340 ‫im Moment nicht definiert ist. 156 00:07:50,340 --> 00:07:55,340 ‫Wenn wir uns also entscheiden, das Bild als Puffer im Speicher 157 00:07:56,270 --> 00:08:00,050 ‫zu speichern, wird der Dateiname nicht wirklich festgelegt, aber 158 00:08:00,050 --> 00:08:02,300 ‫wir brauchen diesen Dateinamen 159 00:08:02,300 --> 00:08:05,050 ‫wirklich in unserer anderen Middleware-Funktion, richtig? 160 00:08:05,050 --> 00:08:09,310 ‫Das ist also hier unten, um mich hier zu aktualisieren. 161 00:08:09,310 --> 00:08:12,360 ‫Wir verlassen uns also auf die Anforderung 162 00:08:12,360 --> 00:08:16,400 ‫Punktdatei Punktdateiname, um den Dateinamen in unserer Datenbank zu speichern, oder? 163 00:08:16,400 --> 00:08:19,770 ‫Und eigentlich sollten wir das definieren. 164 00:08:19,770 --> 00:08:22,442 ‫Und so war es vorher natürlich 165 00:08:22,442 --> 00:08:25,970 ‫durch den Multer-Upload definiert, den wir hatten, aber da 166 00:08:25,970 --> 00:08:30,323 ‫der jetzt weg ist, sollten wir ihn hier im Grunde neu definieren. 167 00:08:31,320 --> 00:08:32,260 ‫Okay? 168 00:08:32,260 --> 00:08:34,560 ‫Dann können wir hier eigentlich diesen 169 00:08:34,560 --> 00:08:37,020 ‫Teil der Erweiterung loswerden, da wir bereits wissen, 170 00:08:37,020 --> 00:08:39,460 ‫dass es immer ein jpeg sein wird. 171 00:08:39,460 --> 00:08:42,570 ‫Aus diesem Grund zu formatieren, okay? 172 00:08:42,570 --> 00:08:45,513 ‫Also können wir hier einfach jpeg setzen. 173 00:08:47,130 --> 00:08:50,383 ‫Es ist also nicht erforderlich, die Dateierweiterung abzurufen. 174 00:08:51,320 --> 00:08:52,263 ‫Und so können 175 00:08:54,610 --> 00:08:55,993 ‫wir das jetzt hier verwenden. 176 00:08:56,911 --> 00:09:00,890 ‫Req Punktdatei Punktdateiname, und das ist 177 00:09:00,890 --> 00:09:02,403 ‫es tatsächlich. 178 00:09:04,020 --> 00:09:04,853 ‫Okay? 179 00:09:04,853 --> 00:09:06,820 ‫Jetzt müssen wir also nur 180 00:09:06,820 --> 00:09:10,790 ‫noch die nächste Middleware im Stack aufrufen, um den Vorgang abzuschließen. 181 00:09:10,790 --> 00:09:14,430 ‫Und das wird die Update-Me-Handler-Funktion sein. 182 00:09:14,430 --> 00:09:17,603 ‫Lassen Sie uns das jetzt natürlich testen. 183 00:09:18,530 --> 00:09:21,280 ‫Diese brauchen wir also nicht mehr. 184 00:09:21,280 --> 00:09:23,390 ‫Kommen wir zu Postman, und 185 00:09:23,390 --> 00:09:25,240 ‫jetzt heißt der 186 00:09:25,240 --> 00:09:28,410 ‫Benutzer, den ich aktualisieren möchte, arrav, denke ich. 187 00:09:28,410 --> 00:09:31,053 ‫Schauen wir uns hier ganz schnell unsere Daten an. 188 00:09:32,520 --> 00:09:35,910 ‫Also ja, dies ist das nicht quadratische Bild, das wir 189 00:09:35,910 --> 00:09:38,070 ‫jetzt hochladen werden, und tatsächlich sehen 190 00:09:38,070 --> 00:09:39,800 ‫Sie hier die Größe, die 191 00:09:39,800 --> 00:09:42,600 ‫1000 mal 1500 beträgt, und vergleichen wir das 192 00:09:42,600 --> 00:09:44,540 ‫später mit unserem hochgeladenen Bild 193 00:09:44,540 --> 00:09:46,223 ‫mit geänderter Größe. 194 00:09:47,110 --> 00:09:48,090 ‫In Ordung. 195 00:09:48,090 --> 00:09:51,090 ‫Wie auch immer, lass uns jetzt 196 00:09:52,120 --> 00:09:55,720 ‫den Namen für arrav bekommen Eigentlich brauchen wir nicht, 197 00:09:56,840 --> 00:10:01,010 ‫sie sind immer gleich, also arrav so, also lass uns einloggen. 198 00:10:01,010 --> 00:10:02,930 ‫Damit wir es dann aktualisieren 199 00:10:02,930 --> 00:10:07,530 ‫können und Sie sehen, dass im Moment das Bild hier Benutzer 11 ist. 200 00:10:07,530 --> 00:10:09,620 ‫Und nur um es ein 201 00:10:09,620 --> 00:10:11,400 ‫bisschen besser zu sehen, lassen 202 00:10:11,400 --> 00:10:15,370 ‫Sie uns mit diesem Benutzer tatsächlich in unserer Webanwendung aktualisieren und 203 00:10:15,370 --> 00:10:16,543 ‫sich einloggen. 204 00:10:21,820 --> 00:10:23,883 ‫Testen Sie also eins, zwei, drei, vier. 205 00:10:26,420 --> 00:10:29,490 ‫In Ordnung, das ist das aktuelle Bild 206 00:10:29,490 --> 00:10:32,233 ‫und jetzt können wir es aktualisieren. 207 00:10:37,120 --> 00:10:40,260 ‫Wählen Sie Dateien aus, und hier ist 208 00:10:41,330 --> 00:10:44,900 ‫unser Bild, öffnen Sie das und sehen wir, was passiert. 209 00:10:44,900 --> 00:10:46,290 ‫Und wir sind fertig. 210 00:10:46,290 --> 00:10:47,980 ‫Das ging eigentlich sehr 211 00:10:47,980 --> 00:10:50,430 ‫schnell, also mal sehen ob es richtig ist. 212 00:10:50,430 --> 00:10:53,023 ‫Zumindest scheint der Name hier richtig zu sein. 213 00:10:54,590 --> 00:10:59,590 ‫Wenn wir uns unsere Nutzer jetzt hier ansehen, dann in 214 00:10:59,750 --> 00:11:02,900 ‫der Öffentlichkeit oder direkt hier. 215 00:11:02,900 --> 00:11:04,520 ‫Das sollte also das sein, was es 216 00:11:04,520 --> 00:11:05,420 ‫eigentlich nicht ist. 217 00:11:07,610 --> 00:11:10,070 ‫Und tatsächlich ist es nirgendwo zu finden. 218 00:11:10,070 --> 00:11:11,710 ‫Lass uns neu laden, ah, und 219 00:11:11,710 --> 00:11:12,913 ‫hier ist es. 220 00:11:14,380 --> 00:11:15,493 ‫Nun, das ist es. 221 00:11:16,580 --> 00:11:20,060 ‫Sie sehen also, dass es jetzt 500 mal 500 222 00:11:20,060 --> 00:11:21,700 ‫ist, hier ist es 223 00:11:21,700 --> 00:11:26,560 ‫viel kleiner, also 55 im Vergleich zu den 315, die wir vorher hatten. 224 00:11:26,560 --> 00:11:28,180 ‫Das ist also 225 00:11:28,180 --> 00:11:31,740 ‫viel besser, und wie Sie hier sehen werden, sollte 226 00:11:31,740 --> 00:11:34,310 ‫es jetzt auch hier aktualisiert werden. 227 00:11:34,310 --> 00:11:36,050 ‫Und das ist perfekt. 228 00:11:36,050 --> 00:11:39,650 ‫Das Gesicht ist hier also tatsächlich mittendrin. 229 00:11:39,650 --> 00:11:43,730 ‫Die Größenänderung lief also wirklich perfekt. 230 00:11:43,730 --> 00:11:44,563 ‫Cool. 231 00:11:44,563 --> 00:11:46,530 ‫Und ich hoffe, Sie 232 00:11:46,530 --> 00:11:48,810 ‫finden auch in Ihren eigenen Anwendungen 233 00:11:48,810 --> 00:11:51,290 ‫Verwendung für diese Art der Bildbearbeitung. 234 00:11:51,290 --> 00:11:54,660 ‫Also nur um kurz zusammenzufassen, was wir hier gemacht haben. 235 00:11:54,660 --> 00:11:57,340 ‫Nun, wir haben eine neue Middleware-Funktion erstellt, 236 00:11:57,340 --> 00:11:59,490 ‫die direkt nach dem Hochladen 237 00:11:59,490 --> 00:12:01,460 ‫des Fotos ausgeführt wird. 238 00:12:01,460 --> 00:12:03,850 ‫Und dieser Upload erfolgt nun 239 00:12:03,850 --> 00:12:07,860 ‫tatsächlich in einen Puffer und nicht mehr direkt in das Dateisystem. 240 00:12:07,860 --> 00:12:08,693 ‫Rechts? 241 00:12:08,693 --> 00:12:11,163 ‫Und deshalb verwenden wir hier diesen 242 00:12:12,010 --> 00:12:14,950 ‫Speicher, aber natürlich funktioniert dieser Multer-Filter 243 00:12:14,950 --> 00:12:16,420 ‫hier noch. 244 00:12:16,420 --> 00:12:20,063 ‫Wir können also immer noch nur Bilder hochladen, in Ordnung? 245 00:12:20,980 --> 00:12:23,510 ‫Also geben wir hier in dieser Middleware 246 00:12:23,510 --> 00:12:25,600 ‫den Dateinamen des Bildes auf 247 00:12:25,600 --> 00:12:28,000 ‫Anforderung Punktdatei Punktdateiname ein, damit wir ihn 248 00:12:28,000 --> 00:12:30,200 ‫dann in der Aktualisierung verwenden können. 249 00:12:31,100 --> 00:12:33,510 ‫Okay, und dann haben wir hier 250 00:12:33,510 --> 00:12:35,670 ‫die eigentliche Bildbearbeitung selbst. 251 00:12:35,670 --> 00:12:38,330 ‫Wo wir zuerst die Größe auf ein Quadrat 252 00:12:38,330 --> 00:12:40,120 ‫geändert und dann zu 253 00:12:40,120 --> 00:12:43,010 ‫einem JPEG mit einer Qualität von 90 Prozent 254 00:12:43,010 --> 00:12:45,930 ‫formatiert haben, und schließlich schreiben wir diese Datei 255 00:12:45,930 --> 00:12:50,710 ‫dann in unser Dateisystem in genau denselben Ordner, den wir auch zuvor angegeben haben. 256 00:12:50,710 --> 00:12:53,260 ‫Okay, so funktioniert es, wenn Sie 257 00:12:53,260 --> 00:12:55,040 ‫etwas Bildbearbeitung benötigen, 258 00:12:55,040 --> 00:12:57,310 ‫aber wenn Sie es nicht brauchen, 259 00:12:57,310 --> 00:13:00,500 ‫können Sie es natürlich so weiter verwenden, okay? 260 00:13:00,500 --> 00:13:02,210 ‫Und deshalb ist es wirklich 261 00:13:02,210 --> 00:13:03,450 ‫wichtig, dass wir 262 00:13:03,450 --> 00:13:05,160 ‫hier beide Wege kennengelernt haben. 263 00:13:05,160 --> 00:13:07,380 ‫Okay, als nächstes im nächsten Video 264 00:13:07,380 --> 00:13:10,462 ‫werden wir dann dieses Formular hier tatsächlich zum Laufen 265 00:13:10,462 --> 00:13:12,700 ‫bringen, damit wir direkt von hier 266 00:13:12,700 --> 00:13:14,633 ‫aus Benutzerfotos hochladen können.