1
00:00:03,680 --> 00:00:05,985
In der vorherigen Lektion

2
00:00:05,985 --> 00:00:08,880
haben wir gelernt, wie Datei-Uploads

3
00:00:08,880 --> 00:00:12,445
durch den Multi-Plattform-Datenansatz unterstützt werden.

4
00:00:12,445 --> 00:00:16,320
In dieser Übung nutzen wir das Multer-Modul, auf

5
00:00:16,320 --> 00:00:21,885
das wir in der Vorlesung verwiesen haben, damit unser Express-Server das

6
00:00:21,885 --> 00:00:27,820
Hochladen von Bilddateien auf unsere Serverseite unterstützen kann.

7
00:00:27,820 --> 00:00:33,920
Sie werden diese Bilddateien in den Ordner öffentlich/images speichern.

8
00:00:33,920 --> 00:00:40,370
Diese Bilder wären in unserer Anwendung nützlich, wenn wir

9
00:00:40,370 --> 00:00:46,690
Bilder für die verschiedenen Gerichte oder die Radare oder die Aktionen liefern,

10
00:00:46,690 --> 00:00:51,490
die wir in unserem REST API Server erstellt haben.

11
00:00:51,490 --> 00:00:55,770
Um mit dieser Übung zu beginnen,

12
00:00:55,770 --> 00:01:01,445
ist der erste Schritt natürlich, das Multer-Modul zu installieren, so geben Sie an der Eingabeaufforderung npm install

13
00:01:01,445 --> 00:01:10,145
multer minus save und im Moment verwende ich multer 1.3.1 in diesem Kurs.

14
00:01:10,145 --> 00:01:12,785
Sobald wir also das Multer-Modul installiert haben,

15
00:01:12,785 --> 00:01:21,695
gehen wir zu unserem Projekt und implementieren dann eine neue Route, die es uns ermöglicht, Dateien hochzuladen.

16
00:01:21,695 --> 00:01:25,920
Gehen Sie in das Projekt im Routenordner,

17
00:01:25,920 --> 00:01:33,210
lassen Sie uns eine neue Datei namens upload router.js hinzufügen.

18
00:01:33,210 --> 00:01:37,260
Dieser Router, Express-Router, den wir hier implementieren werden,

19
00:01:37,260 --> 00:01:43,380
ist derjenige, der das Hochladen der Dateien unterstützen wird.

20
00:01:43,380 --> 00:01:46,250
Also, im Upload-Router lassen Sie mich einfach

21
00:01:46,250 --> 00:01:50,120
zum Dish Router gehen und diese ersten paar Dinge vom Dish Router kopieren,

22
00:01:50,120 --> 00:01:52,550
weil wir ziemlich viel werden, um eine

23
00:01:52,550 --> 00:01:57,440
ähnliche Struktur in unserer Anwendung oder dem Upload-Router einrichten.

24
00:01:57,440 --> 00:02:00,720
Also, lassen Sie mich den Teil kopieren und dann werden wir das bearbeiten.

25
00:02:00,720 --> 00:02:02,800
Also, im Upload-Router,

26
00:02:02,800 --> 00:02:09,850
ich brauche keinen Mungo, also werde ich Mungo entfernen und ich brauche das Geschirr auch nicht.

27
00:02:09,850 --> 00:02:12,755
Also, diese beiden würden entfernt werden und danach

28
00:02:12,755 --> 00:02:15,935
müssen wir Body Parser ausdrücken und authentifizieren.

29
00:02:15,935 --> 00:02:25,585
Jetzt werde ich das Multer-Modul hier benötigen.

30
00:02:25,585 --> 00:02:29,280
Sobald wir das Multer-Modul einschließen,

31
00:02:29,280 --> 00:02:35,585
jetzt diesen Router werde ich dies als Upload-Router nennen.

32
00:02:35,585 --> 00:02:42,020
Also, wird sagen, Upload-Router verwenden Body Parser und

33
00:02:42,020 --> 00:02:48,040
dann dieser, aber der Upload-Router und wieder,

34
00:02:48,040 --> 00:02:58,110
denken Sie daran, Modul-Exporte zu sagen, laden Sie Router hier hoch.

35
00:02:58,110 --> 00:03:00,570
Also, für die Upload-Router-Route,

36
00:03:00,570 --> 00:03:03,025
müssen wir die verschiedenen Methoden hinzufügen.

37
00:03:03,025 --> 00:03:07,130
Ich werde das ein wenig später tun, aber vorher lassen Sie

38
00:03:07,130 --> 00:03:11,765
uns Multer einrichten, damit wir die Dateien hochladen können.

39
00:03:11,765 --> 00:03:19,545
Nun kann Multer standardmäßig eingerichtet werden, indem Sie einfach Multer innerhalb unserer Anwendung verwenden,

40
00:03:19,545 --> 00:03:24,360
aber ich werde eine Konfiguration von Multer in

41
00:03:24,360 --> 00:03:28,100
dieser Übung durchführen, so dass wir die Art und

42
00:03:28,100 --> 00:03:32,615
Weise anpassen, wie Multer den Upload der Dateien verarbeitet.

43
00:03:32,615 --> 00:03:35,150
Um den Multer zu verwenden,

44
00:03:35,150 --> 00:03:43,455
ist eine der Optionen, die Multer nimmt, für die Lagerung.

45
00:03:43,455 --> 00:03:49,295
Also, Multer bietet diese Disk Storage Funktion, die

46
00:03:49,295 --> 00:03:56,480
es uns ermöglicht, die Speicher-Engine zu definieren und hier können wir ein paar Dinge konfigurieren.

47
00:03:56,480 --> 00:04:00,409
Wenn es nun nur darum geht, das Ziel zu konfigurieren,

48
00:04:00,409 --> 00:04:03,830
können Sie einfach den höchsten Doppelpunkt sagen

49
00:04:03,830 --> 00:04:08,810
und dann den Zielordner angeben, in dem die hochgeladenen Dateien gespeichert werden.

50
00:04:08,810 --> 00:04:15,450
Aber hier werde ich einige weitere Konfiguration für das Multer-Modul hier durchführen.

51
00:04:15,450 --> 00:04:19,715
Also, hier werde ich die Multer-Festplattenspeicher-Unterstützung verwenden.

52
00:04:19,715 --> 00:04:22,025
Innerhalb des Datenträgerspeichers

53
00:04:22,025 --> 00:04:27,080
kann ich hier ein paar Optionen definieren.

54
00:04:27,080 --> 00:04:32,315
Die Optionen, die ich definieren werde, werden

55
00:04:32,315 --> 00:04:40,535
Ziel sein und die zweite ist Dateiname.

56
00:04:40,535 --> 00:04:45,725
Also, zwei Konfigurationen, die ich an den Datenträgerspeicher liefern werde.

57
00:04:45,725 --> 00:04:48,860
Das Ziel, wie Sie es erwarten würden,

58
00:04:48,860 --> 00:04:56,405
erlaubt mir, das Ziel zu konfigurieren und dies nimmt

59
00:04:56,405 --> 00:05:03,450
als Konfiguration hier eine Funktion ein.

60
00:05:03,450 --> 00:05:06,980
So wird das Ziel hier als Funktion konfiguriert.

61
00:05:06,980 --> 00:05:14,060
Diese Funktion erhält Anfrage und auch ein Objekt namens Datei, das

62
00:05:14,060 --> 00:05:16,790
Informationen über die Datei enthält, die

63
00:05:16,790 --> 00:05:21,930
von multer verarbeitet wurde, und auch eine Callback-Funktion.

64
00:05:21,930 --> 00:05:24,045
Also, cb ist die Callback-Funktion.

65
00:05:24,045 --> 00:05:27,915
Also, hier für das Ziel,

66
00:05:27,915 --> 00:05:32,865
werde ich cb null sagen,

67
00:05:32,865 --> 00:05:37,054
der zweite Parameter ist der Zielordner

68
00:05:37,054 --> 00:05:41,330
, der als String ausgedrückt werden kann, in dem die Dateien gespeichert werden.

69
00:05:41,330 --> 00:05:51,025
Also, hier drin, werde ich das Ziel als öffentliche Schrägstriche Bilder liefern.

70
00:05:51,025 --> 00:05:54,980
Denn in dieser Übung werde ich Bild-Uploads unterstützen.

71
00:05:54,980 --> 00:05:59,865
Also, das ist der Teil, den ich hier angeben werde, also Bild-Upload.

72
00:05:59,865 --> 00:06:03,800
Also, die Callback-Funktion, wie Sie sehen, nimmt zwei Parameter.

73
00:06:03,800 --> 00:06:04,820
Der erste ist natürlich der

74
00:06:04,820 --> 00:06:07,460
Fehler, den ich in diesem Fall auf

75
00:06:07,460 --> 00:06:11,335
null setzen werde und der zweite ist der Zielordner,

76
00:06:11,335 --> 00:06:14,110
in dem meine Bilder gespeichert werden.

77
00:06:14,110 --> 00:06:19,010
Also kann ich das konfigurieren, indem ich öffentliche Schrägbilder sage.

78
00:06:19,010 --> 00:06:20,995
Also, im Bilderordner

79
00:06:20,995 --> 00:06:24,300
werden die Dateien, die ich hochlade, gespeichert.

80
00:06:24,300 --> 00:06:26,370
Für den Dateinamen

81
00:06:26,370 --> 00:06:31,320
erhält er auch die drei Parameter,

82
00:06:31,320 --> 00:06:35,985
Request Message, file und die Callback-Funktion.

83
00:06:35,985 --> 00:06:39,345
Von der Konfiguration der Art, wie die Callback-Funktion aufgerufen wird,

84
00:06:39,345 --> 00:06:42,140
können wir Informationen über den Dateinamen angeben.

85
00:06:42,140 --> 00:06:47,205
Also, für die Callback-Funktion würde ich cb null sagen und es gibt keinen Fehler hier.

86
00:06:47,205 --> 00:06:51,860
Dann besteht die zweite auf dem Dateinamen, der

87
00:06:51,860 --> 00:06:56,430
für die spezifische Datei verwendet wird, die gerade hochgeladen wurde, und

88
00:06:56,430 --> 00:06:57,975
wie sie gespeichert werden soll.

89
00:06:57,975 --> 00:07:01,835
Also, dieses Dateiobjekt, das ich hier erhalten habe,

90
00:07:01,835 --> 00:07:08,595
unterstützt eine Reihe von mehreren Eigenschaften darauf.

91
00:07:08,595 --> 00:07:11,985
Eine der Eigenschaften heißt, Originalname.

92
00:07:11,985 --> 00:07:14,585
Also, der ursprüngliche Name im Wesentlichen,

93
00:07:14,585 --> 00:07:19,475
gibt uns den ursprünglichen Namen der Datei von der Client-Seite, die hochgeladen wurde.

94
00:07:19,475 --> 00:07:23,410
Ich bestehe darauf, dass, wenn die Datei auf der Serverseite gespeichert

95
00:07:23,410 --> 00:07:26,380
wird, die Datei genau den gleichen Namen

96
00:07:26,380 --> 00:07:29,710
wie der ursprüngliche Name der hochgeladenen Datei erhält.

97
00:07:29,710 --> 00:07:32,605
Damit ich wissen kann, dass ich

98
00:07:32,605 --> 00:07:35,140
genau die gleiche Datei hochlade und auf der Serverseite beim

99
00:07:35,140 --> 00:07:38,200
Hochladen der Datei mit dem gleichen Namen gespeichert wird.

100
00:07:38,200 --> 00:07:42,000
Wenn Sie dies jetzt nicht konfigurieren,

101
00:07:42,000 --> 00:07:45,100
gibt multer standardmäßig eine zufällige Zeichenfolge

102
00:07:45,100 --> 00:07:48,130
als Namen der Datei ohne Erweiterungen.

103
00:07:48,130 --> 00:07:51,590
Also, das ist vielleicht nicht etwas, das Sie

104
00:07:51,590 --> 00:07:55,290
gerne in dieser speziellen Übung verwenden würden.

105
00:07:55,290 --> 00:07:58,940
Deshalb konfiguriere ich explizit, dass die

106
00:07:58,940 --> 00:08:04,805
Datei mit dem ursprünglichen Namen der Datei gespeichert werden sollte, die hochgeladen wurde.

107
00:08:04,805 --> 00:08:08,300
Wir werden dieses Dateiobjekt wieder

108
00:08:08,300 --> 00:08:11,630
etwas detaillierter begegnen und sehen, wie wir die

109
00:08:11,630 --> 00:08:15,245
Informationen aus dem Dateiobjekt ein wenig später nutzen können.

110
00:08:15,245 --> 00:08:22,790
Darüber hinaus kann ich hier auch einen Dateifilter für die Multer-Konfiguration angeben.

111
00:08:22,790 --> 00:08:28,145
Mit dem Dateifilter kann ich angeben, welche Art von Dateien

112
00:08:28,145 --> 00:08:33,410
ich hochladen möchte oder die ich bereit bin, für das Hochladen zu akzeptieren.

113
00:08:33,410 --> 00:08:37,310
Also, dafür werde ich eine andere Funktion namens

114
00:08:37,310 --> 00:08:42,480
const image file filter einrichten

115
00:08:43,360 --> 00:08:48,755
und diese werde ich die Funktion in einer Minute definieren.

116
00:08:48,755 --> 00:08:51,530
Nun, dafür kann ich das auch als

117
00:08:51,530 --> 00:08:55,580
const-Speicher speichern, weil wir const für alles verwendet haben

118
00:08:55,580 --> 00:08:57,650
, also sage ich einfach const storage.

119
00:08:57,650 --> 00:08:59,480
Für den Bilddateifilter

120
00:08:59,480 --> 00:09:01,490
sage ich const Bilddateifilter.

121
00:09:01,490 --> 00:09:07,725
Wieder erhält es drei Parameter Anfrage,

122
00:09:07,725 --> 00:09:11,780
Objekt, das Dateiobjekt, das die Informationen über

123
00:09:11,780 --> 00:09:15,660
die Datei enthält, die hochgeladen wurde, und die Callback-Funktion hier.

124
00:09:15,660 --> 00:09:17,260
Durch die Callback-Funktion

125
00:09:17,260 --> 00:09:22,535
werde ich Informationen an meine Multer-Konfiguration zurückgeben, mit der

126
00:09:22,535 --> 00:09:27,800
ich angeben kann, wie ich diese Informationen speichern soll.

127
00:09:27,800 --> 00:09:30,590
Also, das wird hier eine Pfeilfunktion sein.

128
00:09:30,590 --> 00:09:35,800
Innerhalb dieser Pfeilfunktion, worauf ich überprüfen

129
00:09:35,800 --> 00:09:45,405
werde, ist, dass ich sagen, wenn nicht der ursprüngliche Dateiname übereinstimmt.

130
00:09:45,405 --> 00:09:49,340
Also, der ursprüngliche Name ist hier eine Zeichenfolge.

131
00:09:49,340 --> 00:09:55,780
Also versuche ich zu sehen, ob es eine Übereinstimmung für diese Zeichenfolge gibt, indem ich sage, dass

132
00:09:55,780 --> 00:09:58,260
hier ein regulärer Ausdruck ist.

133
00:09:58,260 --> 00:10:01,570
Also, der reguläre Ausdruck, den ich als Schrägstrich,

134
00:10:01,570 --> 00:10:05,505
Backslash Punkt und dann,

135
00:10:05,505 --> 00:10:09,565
die Optionen, die ich angeben werde, sind jpg

136
00:10:09,565 --> 00:10:15,530
oder jpeg oder

137
00:10:15,530 --> 00:10:22,260
png oder gif.

138
00:10:25,250 --> 00:10:31,575
Also, so spezifiziere ich den regulären Ausdruck dort.

139
00:10:31,575 --> 00:10:32,785
Um das in Ordnung zu sagen,

140
00:10:32,785 --> 00:10:38,515
wenn die Erweiterung der Datei jpg oder jpeg oder png oder gif enthält,

141
00:10:38,515 --> 00:10:44,630
dann werde ich das als Bilddatei behandeln und ich werde bereit sein, diese Dateien zu akzeptieren.

142
00:10:44,630 --> 00:10:47,225
Also, das ist es, was wir hier testen.

143
00:10:47,225 --> 00:10:49,690
Wenn das der Fall ist,

144
00:10:49,690 --> 00:10:54,920
das ist, wenn die Dateierweiterung nicht mit einem dieser Dinge übereinstimmt,

145
00:10:54,920 --> 00:11:02,460
so, deshalb sehen wir nicht, dann werden wir sagen, zurück cb.

146
00:11:02,460 --> 00:11:07,890
Beachten Sie dann, dass der cb der erste Parameter ein Fehler sein würde.

147
00:11:07,890 --> 00:11:12,150
Also, ich werde einen neuen Fehler zurückgeben, der

148
00:11:12,150 --> 00:11:18,375
besagt, dass Sie nur Bilddateien hochladen können.

149
00:11:18,375 --> 00:11:23,195
Wir bestehen also darauf, dass die einzigen Dateien, die sie

150
00:11:23,195 --> 00:11:28,565
akzeptieren, Bilddateien sind und der zweite Parameter falsch wäre.

151
00:11:28,565 --> 00:11:32,240
Da wir den Fehler als ersten Parameter liefern,

152
00:11:32,240 --> 00:11:35,460
wird der zweite Parameter auf false gesetzt.

153
00:11:36,620 --> 00:11:44,340
Das sonst sagt cb null true.

154
00:11:44,340 --> 00:11:49,840
Also, was bedeutet, dass die Datei, die

155
00:11:49,840 --> 00:11:55,440
hochgeladen werden versucht, entspricht dem Muster und so ist es eine Bilddatei,

156
00:11:55,440 --> 00:11:57,955
und so sind wir bereit, es hochgeladen werden zu lassen.

157
00:11:57,955 --> 00:12:03,410
Zwei Konfigurationen, die wir diesem Multer-Modul liefern werden.

158
00:12:03,410 --> 00:12:07,475
Wie konfigurieren wir das Multer-Modul für die Verwendung innerhalb unserer Anwendung?

159
00:12:07,475 --> 00:12:12,489
Dies ist, wo ich const upload

160
00:12:12,489 --> 00:12:19,300
als Multer deklarieren und dann würde ich in Klammern angeben, dass Optionen hier.

161
00:12:19,300 --> 00:12:27,790
Ich kann den Speicher als Speicherfunktion angeben, die ich gerade hier definiert habe.

162
00:12:27,790 --> 00:12:31,645
Diese Speicherfunktion als erster Parameter,

163
00:12:31,645 --> 00:12:35,625
und der zweite Parameter ist ein Dateifilter.

164
00:12:35,625 --> 00:12:40,335
Ein Dateifilter ist eine Methode, mit der ich angeben kann

165
00:12:40,335 --> 00:12:46,760
, welche Art von Datei ich bereit bin zu akzeptieren, und dann werde ich sagen, Bilddateifilter.

166
00:12:46,760 --> 00:12:48,890
Schalten Sie einfach den Zeilenumbruch ein,

167
00:12:48,890 --> 00:12:51,860
damit Sie hier die gesamte Zeile sehen können.

168
00:12:51,860 --> 00:12:57,045
Also, es heißt, Sie können nur Bilddateien hochladen und dann für den Multer

169
00:12:57,045 --> 00:13:01,750
konfiguriere ich den Bildfilter, das war's.

170
00:13:01,750 --> 00:13:10,435
Mein Multer-Modul ist jetzt so konfiguriert, dass ich die Bilddateien hier hochladen kann.

171
00:13:10,435 --> 00:13:15,115
Dann lassen Sie uns jetzt voran und konfigurieren Sie den Upload-Router.

172
00:13:15,115 --> 00:13:16,670
Für den Upload-Router

173
00:13:16,670 --> 00:13:20,325
werde ich hier nur die Post-Methode zulassen.

174
00:13:20,325 --> 00:13:21,910
Daher sind die

175
00:13:21,910 --> 00:13:30,125
Methoden get, put und delete auf dem Upload-Router-Endpunkt nicht erlaubt.

176
00:13:30,125 --> 00:13:32,130
Um mir dabei zu helfen,

177
00:13:32,130 --> 00:13:38,270
gehe ich zum Geschirr-Router und erinnere mich daran, dass wir den Put hier bereits konfiguriert hatten.

178
00:13:38,270 --> 00:13:42,230
Ich werde das kopieren und dann zum

179
00:13:42,230 --> 00:13:47,730
Upload-Router kommen und dann werde ich diese Informationen hier einfügen.

180
00:13:47,730 --> 00:13:53,500
Wir werden sagen, wenn es eine get Operation ist, dann werde ich nicht

181
00:13:53,500 --> 00:14:02,230
unterstützen, dass auf dem Endpunkt ImageUpload wäre.

182
00:14:02,580 --> 00:14:05,545
Das get wird nicht erlaubt,

183
00:14:05,545 --> 00:14:13,040
und ähnlich wird der Put nicht erlaubt,

184
00:14:13,710 --> 00:14:20,000
und auch das Löschen wird nicht erlaubt.

185
00:14:20,640 --> 00:14:31,310
Ich werde keine dieser Operationen unterstützen, also setzen, löschen.

186
00:14:31,310 --> 00:14:33,555
Diese drei werden nicht erlaubt sein.

187
00:14:33,555 --> 00:14:40,030
Die einzige Methode, die ich unterstützen werde, ist die Post-Methode.

188
00:14:40,030 --> 00:14:41,920
Für die Post-Methode

189
00:14:41,920 --> 00:14:47,950
werden wir diese Authentifizierung bis zu diesem Punkt durchführen.

190
00:14:47,950 --> 00:14:50,560
Ich werde das nur dort kopieren,

191
00:14:50,560 --> 00:14:57,205
diesen Endpunkt schließen und für den Post.

192
00:14:57,205 --> 00:14:59,125
Wenn eine Datei gepostet wird,

193
00:14:59,125 --> 00:15:03,035
wie gehen wir mit diesem Beitrag um?

194
00:15:03,035 --> 00:15:06,320
Um den Beitrag hier zu bearbeiten,

195
00:15:06,320 --> 00:15:09,885
brauche ich dafür nicht den nächsten.

196
00:15:09,885 --> 00:15:15,485
Nun, zusätzlich zum authentifizieren VerifyUser und authentifizieren VerifyAdmin, in

197
00:15:15,485 --> 00:15:21,280
der gleichen Zeile werde ich den Upload konfigurieren.

198
00:15:21,280 --> 00:15:27,270
Also, erinnern Sie sich, dass ich Upload mit Multer hier konfiguriert hatte.

199
00:15:27,270 --> 00:15:29,790
Also werde ich den Upload verwenden, der

200
00:15:29,790 --> 00:15:34,200
eine Funktion namens upload.single unterstützt.

201
00:15:34,200 --> 00:15:42,400
Diese einzelne Funktion nimmt als Parameter.

202
00:15:42,400 --> 00:15:49,630
Der Name des Formularfelds, das diese Datei angibt,

203
00:15:49,630 --> 00:15:52,300
werden Sie das in kurzer Zeit sehen.

204
00:15:52,300 --> 00:16:01,930
Dieses Formularfeld werde ich es hier als ImageFile benennen.

205
00:16:01,930 --> 00:16:09,455
Einzel hochladen bedeutet, dass es mir erlaubt, nur eine einzelne Datei hier hochzuladen.

206
00:16:09,455 --> 00:16:15,065
Diese einzelne Datei wird im Upload-Formular von der Clientseite

207
00:16:15,065 --> 00:16:21,730
im mehrteiligen Formular Upload angeben, indem dieser Name dort verwendet wird.

208
00:16:21,860 --> 00:16:26,525
Wenn die Datei im Code erhalten wird,

209
00:16:26,525 --> 00:16:28,060
wenn ich zu diesem Punkt komme,

210
00:16:28,060 --> 00:16:32,290
kümmert sich dieser Upload um die Behandlung der Fehler, wenn es irgendwelche gibt,

211
00:16:32,290 --> 00:16:36,585
wenn die Datei nicht richtig hochgeladen wird und so weiter.

212
00:16:36,585 --> 00:16:38,315
Wenn Sie zu diesem Zeitpunkt kommen,

213
00:16:38,315 --> 00:16:40,630
wäre die Datei erfolgreich hochgeladen worden und

214
00:16:40,630 --> 00:16:43,510
Sie müssen daher die hochgeladene Datei verarbeiten.

215
00:16:43,510 --> 00:16:52,750
An dieser Stelle werden wir sagen res.StatusCode ist

216
00:16:52,750 --> 00:17:02,780
200 und dann res.setHeader Content-Type,

217
00:17:12,240 --> 00:17:18,920
'application/json'. Was ich hier tun werde, ist, dass

218
00:17:19,920 --> 00:17:30,060
wir dieses req.file-Objekt vom Server zurück an den Client übergeben werden.

219
00:17:30,060 --> 00:17:36,570
Dieses req.file-Objekt enthält auch den Pfad zur Datei dort und dieser Pfad kann

220
00:17:36,570 --> 00:17:39,890
vom Client verwendet werden, um jeden Ort zu konfigurieren, an

221
00:17:39,890 --> 00:17:43,735
dem er den Speicherort dieser Bilddatei kennen muss.

222
00:17:43,735 --> 00:17:47,355
Wenn Sie beispielsweise versuchen, ein Gericht

223
00:17:47,355 --> 00:17:51,060
auf die Serverseite und die Details des Gerichts auf die Serverseite hochzuladen,

224
00:17:51,060 --> 00:17:53,700
können Sie das Bild auf den Server hochladen und dann

225
00:17:53,700 --> 00:17:56,230
erhalten Sie die URL dieses Bildes zurück und dann fügen Sie vielleicht

226
00:17:56,230 --> 00:18:02,315
die URL dieses Bildes in das json-Objekt ein, das das Gericht.

227
00:18:02,315 --> 00:18:09,675
Laden Sie dann das Dish JSON-Dokument auf die Serverseite hoch.

228
00:18:09,675 --> 00:18:12,805
Dann wird die req.file zurück an den Client übergeben,

229
00:18:12,805 --> 00:18:18,190
die req.file, wie Sie sehen werden, wenn wir diesen Server ausführen,

230
00:18:18,190 --> 00:18:20,670
die req.file enthält viele Informationen über

231
00:18:20,670 --> 00:18:23,370
die Datei, die gerade hochgeladen wurde und daher werde ich

232
00:18:23,370 --> 00:18:29,700
das untersuchen, um Informationen über die Datei zu erhalten, die ich gerade hochgeladen habe.

233
00:18:29,910 --> 00:18:38,405
So werden wir die Post-Methode dort konfigurieren, das ist es.

234
00:18:38,405 --> 00:18:44,330
Mein Upload-Router ist bereit, Uploads der Dateien zu akzeptieren.

235
00:18:44,330 --> 00:18:51,440
Nun, alles, was ich tun muss, ist, zu app.js zu gehen und dann den Upload-Router zu konfigurieren.

236
00:18:51,440 --> 00:18:53,335
Also, gehen Sie zu app.js

237
00:18:53,335 --> 00:18:55,550
Wir haben bereits alle diese Router.

238
00:18:55,550 --> 00:19:00,350
Also, lassen Sie mich einfach ihren LeaderRouter kopieren und

239
00:19:00,350 --> 00:19:07,475
dann als UploadRouter konfigurieren.

240
00:19:07,475 --> 00:19:14,150
Dies ist also in der UploadRouter-Datei hier.

241
00:19:14,150 --> 00:19:18,965
Also, wir werden den UploadRouter konfigurieren und dann unten hier unten gehen,

242
00:19:18,965 --> 00:19:28,010
wir werden jetzt den ImageUpload-Endpunkt konfigurieren.

243
00:19:28,010 --> 00:19:32,525
Der ImageUpload-Endpunkt ermöglicht es mir, die Datei hochzuladen.

244
00:19:32,525 --> 00:19:37,880
Dies wäre also UploadRouter. Das war's.

245
00:19:37,880 --> 00:19:44,740
Meine Anwendung ist jetzt so konfiguriert, dass sie Datei-Uploads akzeptiert.

246
00:19:44,740 --> 00:19:51,130
Also, lassen Sie uns die Änderungen speichern und dann gehen und schauen Sie sich an, wie unsere Anwendung funktioniert.

247
00:19:51,130 --> 00:19:53,700
Gehen Sie zurück zum Terminal,

248
00:19:53,700 --> 00:19:58,310
stellen Sie jetzt sicher, dass Sie Ihren MongoDB-Server in

249
00:19:58,310 --> 00:20:03,020
einer der Terminalregisterkarten oder in einem der Befehle Windows laufen.

250
00:20:03,020 --> 00:20:04,640
Im anderen Fenster

251
00:20:04,640 --> 00:20:09,210
starten wir den Server.

252
00:20:09,210 --> 00:20:12,455
Sobald unser Server betriebsbereit ist,

253
00:20:12,455 --> 00:20:20,120
gehen wir zu Postman und senden oder vielmehr eine Datei von Postman hoch.

254
00:20:20,120 --> 00:20:24,090
Wie ich bereits erwähnt habe,

255
00:20:24,090 --> 00:20:26,920
verwenden Sie zum Hochladen einer Datei die Multipart/Form-Daten.

256
00:20:26,920 --> 00:20:29,865
Also, zuerst, lassen Sie mich selbst einloggen.

257
00:20:29,865 --> 00:20:33,560
Also, ich werde einen Beitrag über lokale Benutzer anmelden,

258
00:20:33,560 --> 00:20:36,140
und ich werde mich als Administrator anmelden, weil

259
00:20:36,140 --> 00:20:38,815
nur der Administrator seine Dateien dort hochladen kann.

260
00:20:38,815 --> 00:20:45,350
Erinnern Sie sich, dass Ihr Server jetzt am sicheren Port ausgeführt wird.

261
00:20:45,350 --> 00:20:52,580
Also, wir sagen https://localhost:3443,

262
00:20:52,580 --> 00:20:56,090
und es gibt keine Autorisierung hier drin.

263
00:20:56,090 --> 00:21:03,235
Lassen Sie mich also die Autorisierung hier ausschalten und dann die Anfrage an den Server senden.

264
00:21:03,235 --> 00:21:06,005
Also, in Postman, wenn dies geschieht,

265
00:21:06,005 --> 00:21:09,790
dass es sagt, dass keine Antwort erhalten konnte,

266
00:21:09,790 --> 00:21:15,025
das liegt daran, dass Sie jetzt den sicheren Server ausführen.

267
00:21:15,025 --> 00:21:17,095
In diesem Fall

268
00:21:17,095 --> 00:21:23,170
wird Postman das selbstsignierte Zertifikat nicht akzeptieren, das eingeht.

269
00:21:23,170 --> 00:21:28,790
Also, in diesem Fall, öffnen Sie die Einstellungen hier und in den Einstellungen,

270
00:21:28,790 --> 00:21:31,360
unter dem Feld Allgemeine Einstellungen,

271
00:21:31,360 --> 00:21:34,765
sehen Sie diese SSL-Zertifikatüberprüfung.

272
00:21:34,765 --> 00:21:38,580
Schalten Sie diese Option aus, damit Ihr Postbote bereit ist,

273
00:21:38,580 --> 00:21:43,975
das selbstsignierte Zertifikat anzunehmen, das wir auf der Serverseite installiert haben.

274
00:21:43,975 --> 00:21:47,450
So können Sie Ihren Server auf

275
00:21:47,450 --> 00:21:53,300
dem https://localhost:3443 User Login-Endpunkt kontaktieren.

276
00:21:53,300 --> 00:21:55,775
Wenn wir also versuchen, sich jetzt anzumelden,

277
00:21:55,775 --> 00:21:59,750
werden Sie jetzt sehen, dass Ihre Post-Anfrage

278
00:21:59,750 --> 00:22:03,035
vom Server erfolgreich angenommen wurde

279
00:22:03,035 --> 00:22:06,275
und der Server dann mit den Token-Informationen antwortet.

280
00:22:06,275 --> 00:22:12,515
Um sicherzustellen, dass Postman Ihnen erlaubt, den sicheren Server zu kontaktieren,

281
00:22:12,515 --> 00:22:16,264
klicken Sie auf Einstellungen und

282
00:22:16,264 --> 00:22:20,645
deaktivieren Sie unter Allgemein die SSL-Zertifikatvalidierung.

283
00:22:20,645 --> 00:22:23,195
Also, sobald Sie sich einloggen,

284
00:22:23,195 --> 00:22:25,605
lassen Sie uns das Token hier kopieren.

285
00:22:25,605 --> 00:22:28,290
Also, ich werde das Token hier kopieren.

286
00:22:28,290 --> 00:22:31,000
Versuchen wir nun, die Datei hochzuladen.

287
00:22:31,000 --> 00:22:34,215
Um die Datei hochzuladen, wie Sie bemerkt

288
00:22:34,215 --> 00:22:36,830
haben, müssen wir diese Datei unter localhost: 3443 hochladen,

289
00:22:36,830 --> 00:22:46,080
und der Endpunkt ist ImageUpload.

290
00:22:47,680 --> 00:22:51,200
Für den ImageUpload hier,

291
00:22:51,200 --> 00:22:57,360
im Header, müssen wir die Autorisierung konfigurieren.

292
00:22:57,490 --> 00:23:00,560
Also, wir werden die Autorisierung konfigurieren,

293
00:23:00,560 --> 00:23:03,035
und dann sagen Sie,

294
00:23:03,035 --> 00:23:08,820
„Bearer“, und geben Sie das ein Token, das wir erhalten haben.

295
00:23:08,820 --> 00:23:14,785
Behalten Sie also irgendwo eine Kopie des Tokens und kopieren Sie das Token in den Header.

296
00:23:14,785 --> 00:23:18,260
Im Body, um eine Datei hochzuladen,

297
00:23:18,260 --> 00:23:20,030
werden wir diese Formulardaten verwenden.

298
00:23:20,030 --> 00:23:24,020
So können Sie die Multipart-/Formulardaten hier ausführen.

299
00:23:24,020 --> 00:23:26,625
Wenn Sie also auf die Formulardaten klicken,

300
00:23:26,625 --> 00:23:32,310
können Sie hier die Datei angeben, die Sie hochladen möchten.

301
00:23:32,310 --> 00:23:36,040
Wenn Sie hier auf einen neuen Schlüssel klicken,

302
00:23:37,870 --> 00:23:43,040
verwenden Sie diesen Schlüssel als ImageFile.

303
00:23:43,040 --> 00:23:52,695
Daran erinnern, dass, wenn wir die Post-Methode auf der UploadRouter-Website konfiguriert,

304
00:23:52,695 --> 00:23:56,515
wir angegeben, dass ein ImageFile hochladen.

305
00:23:56,515 --> 00:23:59,670
Also, das ist der gleiche Schlüssel, den Sie hier verwenden werden.

306
00:23:59,670 --> 00:24:03,410
Dann, wenn Sie den Schlüssel geben,

307
00:24:03,410 --> 00:24:05,270
dann den zweiten Teil,

308
00:24:05,270 --> 00:24:09,875
werden Sie dies hier von Text zu Datei setzen.

309
00:24:09,875 --> 00:24:15,595
So können Sie die Datei als Wert für diesen bestimmten Schlüssel angeben.

310
00:24:15,595 --> 00:24:20,045
Also, dann werden Sie sehen, dass diese Schaltfläche angezeigt wird, die sagt: „Dateien auswählen“.

311
00:24:20,045 --> 00:24:25,505
Sie können das also öffnen und dann eine Datei auswählen, die Sie hochladen möchten.

312
00:24:25,505 --> 00:24:30,060
Also, hier, ich gehe zu meinem,

313
00:24:30,160 --> 00:24:37,470
ich habe eine Datei in einem meiner Ordner hier.

314
00:24:37,470 --> 00:24:41,685
Also, ich werde nur in Asset-Bilder gehen,

315
00:24:41,685 --> 00:24:46,640
und dann laden wir einfach eine PNG-Datei von hier hoch.

316
00:24:46,640 --> 00:24:48,230
Sie können also sagen:

317
00:24:48,230 --> 00:24:50,280
„Laden Sie die spezifische Datei hoch.“

318
00:24:50,280 --> 00:24:52,100
Wie Sie sich erinnern,

319
00:24:52,100 --> 00:24:56,020
haben wir unseren Server so konfiguriert, dass er nur ImageFile akzeptiert.

320
00:24:56,020 --> 00:24:58,720
Also sagen wir: „Laden Sie diese bestimmte Datei hoch.“

321
00:24:58,720 --> 00:25:03,050
Wenn Sie dann auf die Schaltfläche Senden klicken,

322
00:25:03,050 --> 00:25:04,940
beachten

323
00:25:04,940 --> 00:25:07,145
Sie, dass Sie dies im Körper mit Formulardaten konfigurieren müssen.

324
00:25:07,145 --> 00:25:11,240
Also, die Multipart/Formulardaten, und dann der Schlüssel ist die ImageFile,

325
00:25:11,240 --> 00:25:15,440
und der Wert ist die Datei, die Sie gerade ausgewählt haben,

326
00:25:15,440 --> 00:25:17,575
und klicken Sie dann auf die Schaltfläche Senden.

327
00:25:17,575 --> 00:25:19,940
Wenn Sie also auf die Schaltfläche Senden klicken,

328
00:25:19,940 --> 00:25:23,670
wird die Datei auf Ihre Serverseite hochgeladen und

329
00:25:23,670 --> 00:25:27,770
dann antwortet der Server mit diesem Objekt zurück.

330
00:25:27,770 --> 00:25:29,770
Dies ist also, was im

331
00:25:29,770 --> 00:25:34,820
req.file-Objekt enthalten ist, das sich hier im Anforderungsobjekt befindet.

332
00:25:34,820 --> 00:25:38,250
Also, diese req.file, wie Sie sehen, enthält einen Feldnamen.

333
00:25:38,250 --> 00:25:39,590
Feldname ist ImageFile.

334
00:25:39,590 --> 00:25:43,200
Beachten Sie also, dass dies genau das gleiche ist wie dieses hier.

335
00:25:43,200 --> 00:25:50,290
Der Originalname, also beachten Sie, dass der Originalname-Ausdruck alberto.png enthält,

336
00:25:50,290 --> 00:25:52,915
was die Datei ist, die ich hochgeladen habe.

337
00:25:52,915 --> 00:25:56,250
Jetzt können Sie sehen, warum ich, wenn ich

338
00:25:56,250 --> 00:26:00,905
den Speicher und den Dateinamen konfiguriert habe, file.originalname gesetzt habe.

339
00:26:00,905 --> 00:26:03,515
Also, das ist, was dort verwendet werden wird.

340
00:26:03,515 --> 00:26:05,410
Hier sehen Sie den Codierungstyp,

341
00:26:05,410 --> 00:26:08,745
den Mimetyp und das Ziel,

342
00:26:08,745 --> 00:26:10,995
in welchen Ordner die Datei abgelegt wurde,

343
00:26:10,995 --> 00:26:13,060
und den tatsächlichen Pfad der Datei,

344
00:26:13,060 --> 00:26:18,240
den relativen Pfad vom Stamm des Serverordners.

345
00:26:18,240 --> 00:26:23,555
Dieser Pfad zeigt also an, wo die Datei serverseitig zugänglich ist.

346
00:26:23,555 --> 00:26:29,865
Wenn Sie beispielsweise die Details eines Gerichts oder einer Führungslinie konfigurieren,

347
00:26:29,865 --> 00:26:37,490
würden Sie einfach die Bildeigenschaft des Führers für images/alberto.png verwenden.

348
00:26:37,490 --> 00:26:40,390
Public sollte sowieso nicht verwendet werden, da der Öffentliche Ordner

349
00:26:40,390 --> 00:26:43,420
derjenige ist, der als Stammordner für unseren Server fungiert.

350
00:26:43,420 --> 00:26:46,560
Also, Sie müssen nur diese Images.alberto liefern.

351
00:26:46,560 --> 00:26:49,475
Aus diesem Pfad, den Sie erhalten,

352
00:26:49,475 --> 00:26:52,685
nachdem die Datei erfolgreich hochgeladen wurde,

353
00:26:52,685 --> 00:26:58,130
extrahieren Sie diesen Teil und verwenden Sie ihn dann für das Bild in

354
00:26:58,130 --> 00:27:04,265
Ihrem JSON-Dokument, das die spezifische Führungslinie beschreibt.

355
00:27:04,265 --> 00:27:09,260
Also, so laden wir eine Datei hoch.

356
00:27:09,260 --> 00:27:11,985
Nun, um Sie davon zu überzeugen, dass die Strafe tatsächlich hochgeladen wurde,

357
00:27:11,985 --> 00:27:14,375
gehen wir zu unserem Projekt.

358
00:27:14,375 --> 00:27:16,655
Gehen Sie zu unserem Projekt,

359
00:27:16,655 --> 00:27:22,215
im Öffentlichen Ordner,

360
00:27:22,215 --> 00:27:26,325
können Sie jetzt sehen, dass es einen Images Unterordner gibt.

361
00:27:26,325 --> 00:27:28,120
Im Unterordner images

362
00:27:28,120 --> 00:27:32,785
können Sie die Datei alberta.png sehen, die dort hochgeladen wurde.

363
00:27:32,785 --> 00:27:37,635
Jetzt können wir weitere ImageFiles auf unsere serverseitige Seite hochladen.

364
00:27:37,635 --> 00:27:40,425
Wenn Sie nun versuchen, eine Nicht-ImageFile hochzuladen,

365
00:27:40,425 --> 00:27:42,980
würden Sie sehen, dass der Server keine

366
00:27:42,980 --> 00:27:46,660
Nicht-ImageFile akzeptiert und dann zurückantwortet:

367
00:27:46,660 --> 00:27:49,180
„Die Nicht-ImageFile kann nicht akzeptiert werden.“

368
00:27:49,180 --> 00:27:54,050
Auf diese Weise werden wir unseren Express-Server so konfigurieren,

369
00:27:54,050 --> 00:27:59,390
dass Uploads von ImageFiles von unserer Client-Seite akzeptiert werden.

370
00:27:59,390 --> 00:28:03,065
Damit schließen wir diese Übung ab.

371
00:28:03,065 --> 00:28:05,400
In dieser Übung haben wir gesehen, wie wir

372
00:28:05,400 --> 00:28:09,840
das Meta-Modul verwenden, um unseren Express-Server so zu konfigurieren,

373
00:28:09,840 --> 00:28:17,735
dass Dateiuploads auf einem /ImageUpload Rest API-Endpunkt akzeptiert werden.

374
00:28:17,735 --> 00:28:19,840
Wenn wir auf dem Endpunkt posten,

375
00:28:19,840 --> 00:28:25,585
wird die Datei in einen angegebenen Ordner auf der Server-Site hochgeladen.

376
00:28:25,585 --> 00:28:27,900
Damit schließen wir diese Übung ab.

377
00:28:27,900 --> 00:28:34,890
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht 'Datei-Upload' zu machen.