1
00:00:00,000 --> 00:00:04,223
[MUSIC]

2
00:00:04,223 --> 00:00:09,176
Datei-Uploads sind ein gängiges Feature, das von vielen Servern unterstützt wird.

3
00:00:09,176 --> 00:00:13,642
Wenn Sie beispielsweise ein Formular ausfüllen, können Sie dort ein Feld haben,

4
00:00:13,642 --> 00:00:19,545
in dem Sie einen Dateinamen ausfüllen und diese Datei dann auf die serverseitige Seite hochladen.

5
00:00:19,545 --> 00:00:23,890
Angenommen, Sie laden die Informationen zu einem Gericht auf die serverseitige Seite hoch.

6
00:00:23,890 --> 00:00:28,300
Dann möchten Sie auch das entsprechende Bild des Gerichts

7
00:00:28,300 --> 00:00:29,510
auf die Serverseite hochladen.

8
00:00:29,510 --> 00:00:34,915
Dabei laden Sie zunächst das Bild des Gerichts auf die serverseitige Seite hoch,

9
00:00:34,915 --> 00:00:36,770
erhalten eine URL für

10
00:00:36,770 --> 00:00:41,170
dieses Bild von der serverseitigen Seite, wo es hochgeladen und gespeichert wird, und

11
00:00:41,170 --> 00:00:47,380
verwenden dann dieses Bild im JSON-Dokument, das das Gericht ausführlich beschreibt.

12
00:00:47,380 --> 00:00:53,050
Wenn Clients anschließend das JSON-Dokument abrufen,

13
00:00:53,050 --> 00:00:59,790
das das Gericht beschreibt, um die Benutzeroberfläche zu rendern, dann

14
00:00:59,790 --> 00:01:04,310
können sie aus dem JSON-Dokument die URL des Dish-Bildes erhalten, das auf die serverseitige Seite hochgeladen wurde.

15
00:01:04,310 --> 00:01:07,510
Und dann verwenden Sie es beim Erstellen der Benutzeroberfläche.

16
00:01:07,510 --> 00:01:12,500
So haben wir in den Beispielen, die wir bisher gesehen haben, als wir uns die Details

17
00:01:12,500 --> 00:01:16,880
eines Gerichts angesehen haben, gesehen, dass dort ein Bild gefüllt ist, das eine Zeichenfolge ist,

18
00:01:16,880 --> 00:01:24,540
die nichts anderes als die URL für dieses Bild ist, das diesem speziellen Gericht entspricht.

19
00:01:24,540 --> 00:01:32,300
Oder die Promotion oder der Leser, wie wir in unserem REST API-Server erstellt haben.

20
00:01:32,300 --> 00:01:37,210
In dieser Vorlesung erfahren wir mehr über das Hochladen von Dateien.

21
00:01:37,210 --> 00:01:39,802
Wie wird es in einem Server unterstützt?

22
00:01:39,802 --> 00:01:43,940
Und dann, wie wir ein Knotenmodul nutzen können, mit

23
00:01:43,940 --> 00:01:48,590
dem wir das Hochladen von Dateien unterstützen können.

24
00:01:50,260 --> 00:01:53,630
Dateiuploads werden in der Regel über eine Formulareingabe unterstützt.

25
00:01:53,630 --> 00:01:58,530
Wenn Sie also in einer Eingabe den Typ als Datei und

26
00:01:58,530 --> 00:02:03,800
den Namen als Name des Feldes dort angeben,

27
00:02:03,800 --> 00:02:09,210
dann können Sie die Datei angeben, die hochgeladen wird,

28
00:02:09,210 --> 00:02:14,400
wenn Sie auf diese Schaltfläche zum Senden für dieses spezielle Formular klicken.

29
00:02:14,400 --> 00:02:20,234
Wenn nun die Dateiinformationen auf die serverseitige Seite hochgeladen werden, werden

30
00:02:20,234 --> 00:02:24,714
die Formulardaten selbst typischerweise entweder als

31
00:02:24,714 --> 00:02:31,200
application/x-www-form-urlencoded oder multipart/form-data codiert.

32
00:02:31,200 --> 00:02:35,900
Dann entwerfen Sie Ihr Formular, zum Beispiel entwerfen Sie Ihr Formular mit

33
00:02:35,900 --> 00:02:40,450
Aktion, die auf /imageUpload bei REST-API-Neigung festgelegt ist,

34
00:02:40,450 --> 00:02:48,760
was als Endpunkt fungiert, zu dem Sie den Beitrag des Bildes ausführen.

35
00:02:48,760 --> 00:02:53,870
Damit die entsprechende Methode post und der Codierungstyp wäre,

36
00:02:53,870 --> 00:02:58,140
würden Sie sie auf multipart/form-data innerhalb Ihres Formulars setzen.

37
00:02:58,140 --> 00:03:02,797
Das bedeutet also, dass die Formularelemente in den Codierungstyp codiert

38
00:03:02,797 --> 00:03:05,920
und dann auf die serverseitige Seite hochgeladen werden.

39
00:03:05,920 --> 00:03:11,228
Dateiupload ist effizienter mit Multipart-/Formulardaten.

40
00:03:11,228 --> 00:03:16,130
Und daher ist das der bevorzugte Ansatz, den wir zum Hochladen von Dateien verwenden.

41
00:03:17,560 --> 00:03:22,945
Nun, wenn Sie mehr Details über Datei-Upload und

42
00:03:22,945 --> 00:03:28,843
Formular-Upload und Anwendung Anwendung/x-www-form-urlencoded oder

43
00:03:28,843 --> 00:03:33,848
die Multipart/form-Daten wissen möchten, dann können Sie die HTML5

44
00:03:33,848 --> 00:03:37,410
(W3C Recommendation) lesen, wo die Details angegeben sind, und

45
00:03:37,410 --> 00:03:42,270
auch die entsprechende IETF Request for Comented Dokumente.

46
00:03:42,270 --> 00:03:47,190
Ich habe Links zu diesen in den zusätzlichen Ressourcen, falls Sie mehr

47
00:03:47,190 --> 00:03:54,070
über die tatsächlichen Details erfahren möchten, wie diese Formularcodierungstypen unterstützt werden.

48
00:03:55,090 --> 00:04:00,110
Aus unserer Sicht, wenn wir die Multipart/Form-Daten verwenden,

49
00:04:00,110 --> 00:04:04,850
wenn dies in einer

50
00:04:04,850 --> 00:04:10,040
HTTP-Anforderungsnachricht enthalten ist, die auf die Serverseite geht, dann

51
00:04:10,040 --> 00:04:15,320
haben Sie im Header der Anforderungsnachricht einen Inhaltstyp auf multipart/form-data gesetzt.

52
00:04:15,320 --> 00:04:19,410
Und dann auch ein Grenzwert so eingerichtet.

53
00:04:19,410 --> 00:04:23,305
Die Begrenzung trennt die mehrere Teile des Anforderungstextes.

54
00:04:23,305 --> 00:04:28,215
Der Anforderungstext selbst der ausgehenden Anforderungsnachricht wird also

55
00:04:28,215 --> 00:04:29,475
in mehrere Teile unterteilt.

56
00:04:29,475 --> 00:04:33,375
Und jedes Teil wird vom vorherigen Teil abgegrenzt,

57
00:04:33,375 --> 00:04:36,582
indem diese Grenze hier verwendet wird.

58
00:04:36,582 --> 00:04:40,912
Nun, um Ihnen die Details weiter zu veranschaulichen, habe ich den

59
00:04:40,912 --> 00:04:45,292
Server manipuliert, um diese Informationen aus der eingehenden Anforderungsnachricht auszudrucken.

60
00:04:45,292 --> 00:04:49,202
Damit wir das etwas genauer untersuchen können.

61
00:04:49,202 --> 00:04:52,092
Wenn Sie sich die Details für

62
00:04:52,092 --> 00:04:57,850
eine bestimmte Nachricht ansehen, die ich von meinem Postboten auf die Serverseite gesendet habe,

63
00:04:57,850 --> 00:05:03,250
können Sie feststellen, dass ich hier die Anforderungskopfzeilen gedruckt habe.

64
00:05:03,250 --> 00:05:08,530
Und insbesondere im Anforderungskopf, lassen Sie mich Ihre Aufmerksamkeit auf diesen Header

65
00:05:08,530 --> 00:05:13,500
hier lenken, den sogenannten Inhaltstyp, der auf multipart/form-data gesetzt ist.

66
00:05:13,500 --> 00:05:17,720
Und dann notieren Sie insbesondere die Grenze, die hier

67
00:05:17,720 --> 00:05:20,660
mit dieser langen Zahl definiert ist.

68
00:05:20,660 --> 00:05:23,500
Das ist also der Anforderungsheader für

69
00:05:23,500 --> 00:05:28,400
die eingehende Anforderungsnachricht, die ich mithilfe der Post-Methode gepostet habe.

70
00:05:28,400 --> 00:05:32,750
In der Tat ist dies genau die Anforderungsnachricht, die ich

71
00:05:32,750 --> 00:05:37,710
in der Übung verwenden werde, die dieser Vorlesung folgt, um die Datei hochzuladen.

72
00:05:37,710 --> 00:05:42,110
Also, wenn wir die Datei dort hochladen, werden Sie bemerken, dass

73
00:05:42,110 --> 00:05:46,920
im Anfragetext, also hier drucke ich den Anfragetext unten aus.

74
00:05:46,920 --> 00:05:49,010
Und im Anfragetext

75
00:05:49,010 --> 00:05:54,460
werden Sie feststellen, dass es diese bestimmte Zeile hier ausdruckt.

76
00:05:54,460 --> 00:05:58,040
Und das entspricht der hier angegebenen Grenze.

77
00:05:58,040 --> 00:06:04,717
Diese Grenze gibt also im Wesentlichen die Trennung zwischen den verschiedenen Teilen

78
00:06:04,717 --> 00:06:10,070
des mehrteiligen Körpers an, der Teil dieser Anforderungsnachricht ist.

79
00:06:10,070 --> 00:06:13,330
Im Anforderungskörper sehen Sie, dass dies hier definiert wird.

80
00:06:13,330 --> 00:06:18,810
Darüber hinaus geben Sie auch die gleiche Content-Disposition wie Formulardaten an,

81
00:06:18,810 --> 00:06:22,361
was bedeutet, dass sie dies als Formulardaten und

82
00:06:22,361 --> 00:06:24,920
den entsprechenden Namen a s ImageFile interpretieren.

83
00:06:26,120 --> 00:06:30,569
Und der Dateiname selbst von der Client-Seite, die hochgeladen wurde,

84
00:06:30,569 --> 00:06:33,220
wird hier der Dateiname selbst angegeben.

85
00:06:33,220 --> 00:06:38,180
Und dann unten steht Content-Type: image/png.

86
00:06:38,180 --> 00:06:41,620
Also lade ich diese PNG-Bilddatei hier hoch.

87
00:06:41,620 --> 00:06:44,220
Dies sind also die Details, die hier beschrieben werden.

88
00:06:44,220 --> 00:06:48,870
Und wenn Sie in den Anforderungstext selbst scrollen,

89
00:06:48,870 --> 00:06:53,480
sehen Sie die Details dessen, was im Anforderungstext enthalten ist.

90
00:06:53,480 --> 00:07:00,680
Also dies in der PNG-Datei hier, werden Sie diese Informationen in der PNG-Datei sehen.

91
00:07:00,680 --> 00:07:03,970
Wenn Sie also die PNG-Datei öffnen, würden Sie dies hier sehen.

92
00:07:03,970 --> 00:07:07,200
Dies enthält also eine ganze Reihe von Zeichen hier,

93
00:07:07,200 --> 00:07:09,960
die offensichtlich auf dem Bildschirm nicht gedruckt werden können.

94
00:07:09,960 --> 00:07:14,980
Wenn Sie also nach unten scrollen, werden Sie diese ganze Menge von Informationen,

95
00:07:16,960 --> 00:07:21,730
die tatsächlich im Anforderungstext der

96
00:07:21,730 --> 00:07:26,310
Anforderungsnachricht enthalten ist, die diese bestimmte Datei auf die serverseitige Seite hochlädt.

97
00:07:26,310 --> 00:07:30,720
Sie sehen also, dass dieser Körper tatsächlich die codierte Version

98
00:07:30,720 --> 00:07:33,640
des Bildes enthält.

99
00:07:33,640 --> 00:07:39,650
Und das ist das Ende der Grenze für diesen Anforderungstext.

100
00:07:39,650 --> 00:07:44,960
In unserer Anfragenachricht haben wir hier nur eine Datei enthalten.

101
00:07:44,960 --> 00:07:48,230
Sie können auch mehrere Dateien hochladen, wenn Sie möchten.

102
00:07:48,230 --> 00:07:53,140
Aber dann müssen Sie das npm-Modul entsprechend konfigurieren, um

103
00:07:53,140 --> 00:07:55,490
mehrere Dateien zu akzeptieren.

104
00:07:55,490 --> 00:08:02,780
So enthält Ihr Anforderungstext selbst die codierte Version

105
00:08:02,780 --> 00:08:08,045
des Bildes, von der Ihr Server das Image extrahiert

106
00:08:08,045 --> 00:08:12,515
und es dann in der Datei mit demselben Dateinamen auf der Serverseite speichert.

107
00:08:12,515 --> 00:08:17,245
So konfigurieren wir unsere Anwendung, die serverseitige Anwendung,

108
00:08:17,245 --> 00:08:21,095
in der Übung, die dieser Vorlesung folgt.

109
00:08:21,095 --> 00:08:23,990
Also dachte ich, dass es ein interessanter

110
00:08:23,990 --> 00:08:28,500
Schritt sein wird, um Ihnen genau zu zeigen, was mein Server empfängt.

111
00:08:28,500 --> 00:08:33,090
Und so wird das sagen, warum wir diese Grenze hier spezifizieren.

112
00:08:33,090 --> 00:08:35,230
Und wie

113
00:08:35,230 --> 00:08:41,163
wir innerhalb des Anforderungskörpers selbst die Grenze verwenden, um die verschiedenen Teile des Anforderungskörpers abzugrenzen.

114
00:08:41,163 --> 00:08:43,895
So kann die serverseitige, wenn sie verarbeitet

115
00:08:43,895 --> 00:08:49,645
wird, die Bilddaten aus dem Anforderungstext entsprechend extrahieren

116
00:08:49,645 --> 00:08:52,660
und dann die Bilddatei auf der Serverseite speichern.

117
00:08:53,890 --> 00:08:59,030
So wie ich im Terminal

118
00:08:59,030 --> 00:09:03,320
dort gezeigt habe, trennt diese Grenze den Multipass-Anforderungsteil.

119
00:09:03,320 --> 00:09:06,538
Und so sahen Sie die dort angegebene Grenze.

120
00:09:06,538 --> 00:09:12,843
Um mit den mehrteiligen Formulardaten zu arbeiten, die im Anforderungstext enthalten sind,

121
00:09:12,843 --> 00:09:17,768
verwenden wir ein NPR-Modul, das die Verarbeitung

122
00:09:17,768 --> 00:09:22,610
von mehrteiligen Formulardaten unterstützt, die innerhalb des Anforderungstextes enthalten sind.

123
00:09:22,610 --> 00:09:25,290
Es extrahiert automatisch alles für Sie und

124
00:09:25,290 --> 00:09:31,218
lädt es dann auf zwei Objekte auf dem Anforderungsobjekt auf der Serverseite.

125
00:09:31,218 --> 00:09:36,840
Also dieses npm-Modul namens Multer, die, wenn

126
00:09:36,840 --> 00:09:41,280
auf Ihrer serverseitigen Anwendung installiert und

127
00:09:41,280 --> 00:09:44,910
konfigurieren Sie Ihren Express-Server Multer zu verwenden.

128
00:09:44,910 --> 00:09:49,370
Dann können Sie die eingehende Anforderungsnachricht verarbeiten, die

129
00:09:49,370 --> 00:09:52,560
diese Multipart-/Formulardaten in der Anforderungsnachricht enthält.

130
00:09:52,560 --> 00:09:56,190
Multer ist also das Knotenmodul, in dem das

131
00:09:56,190 --> 00:09:59,930
dem Server hilft, Multipart/Form-Daten zu verarbeiten.

132
00:09:59,930 --> 00:10:04,330
Dies wird auf einem anderen npm-Modul namens busboy geschrieben.

133
00:10:04,330 --> 00:10:11,480
Busboy ist ein Modul, das eingehende HTML-Formulardaten, allgemeine HTML-Formulardaten verarbeitet.

134
00:10:11,480 --> 00:10:16,350
Multer setzt Busboy ein, damit Sie

135
00:10:16,350 --> 00:10:20,330
mehrteilige /form-Daten auf Ihrer Serverseite verarbeiten können.

136
00:10:20,330 --> 00:10:24,040
Wenn diese Informationen analysiert werden, lädt Multer

137
00:10:24,040 --> 00:10:29,280
die eingehenden Formulardaten hoch und fügt der req ein Körperobjekt hinzu.

138
00:10:29,280 --> 00:10:34,070
Sie haben also ein req.body-Objekt und auch ein req.file-Objekt.

139
00:10:34,070 --> 00:10:38,861
Wenn Sie eine einzelne Datei hochladen, wird es req.file-Objekt fortgesetzt.

140
00:10:38,861 --> 00:10:44,042
Wenn Sie dann Ihren Multer so einrichten, dass er mehrere Datei-Uploads akzeptiert,

141
00:10:44,042 --> 00:10:47,590
können Sie das req.files-Objekt einrichten.

142
00:10:47,590 --> 00:10:51,480
Das Files-Objekt wird ein Array sein, das alle Informationen für

143
00:10:51,480 --> 00:10:54,878
jede bestimmte Datei enthält, die auf der Serverseite hochgeladen wird.

144
00:10:54,878 --> 00:11:00,565
Das Dateiobjekt selbst enthält Informationen,

145
00:11:00,565 --> 00:11:05,714
die zusammenfassen, wie die Datei serverseitig von Multer gespeichert wird.

146
00:11:05,714 --> 00:11:09,219
Mit diesem schnellen Verständnis, wie Datei-Upload funktioniert,

147
00:11:09,219 --> 00:11:14,340
gehen wir auf die Übung, wo wir tatsächlich das Multer-Modul konfigurieren.

148
00:11:14,340 --> 00:11:19,113
Und dann verwenden Sie es innerhalb unserer Express-Anwendung, um Datei-Uploads

149
00:11:19,113 --> 00:11:20,685
von der Client-Seite zu verarbeiten.

150
00:11:20,685 --> 00:11:26,869
( MUSIK)