[MUSIC]
Datei-Uploads sind ein gängiges Feature, das von vielen Servern unterstützt wird.
Wenn Sie beispielsweise ein Formular ausfüllen, können Sie dort ein Feld haben,
in dem Sie einen Dateinamen ausfüllen und diese Datei dann auf die serverseitige Seite hochladen.
Angenommen, Sie laden die Informationen zu einem Gericht auf die serverseitige Seite hoch.
Dann möchten Sie auch das entsprechende Bild des Gerichts
auf die Serverseite hochladen.
Dabei laden Sie zunächst das Bild des Gerichts auf die serverseitige Seite hoch,
erhalten eine URL für
dieses Bild von der serverseitigen Seite, wo es hochgeladen und gespeichert wird, und
verwenden dann dieses Bild im JSON-Dokument, das das Gericht ausführlich beschreibt.
Wenn Clients anschließend das JSON-Dokument abrufen,
das das Gericht beschreibt, um die Benutzeroberfläche zu rendern, dann
können sie aus dem JSON-Dokument die URL des Dish-Bildes erhalten, das auf die serverseitige Seite hochgeladen wurde.
Und dann verwenden Sie es beim Erstellen der Benutzeroberfläche.
So haben wir in den Beispielen, die wir bisher gesehen haben, als wir uns die Details
eines Gerichts angesehen haben, gesehen, dass dort ein Bild gefüllt ist, das eine Zeichenfolge ist,
die nichts anderes als die URL für dieses Bild ist, das diesem speziellen Gericht entspricht.
Oder die Promotion oder der Leser, wie wir in unserem REST API-Server erstellt haben.
In dieser Vorlesung erfahren wir mehr über das Hochladen von Dateien.
Wie wird es in einem Server unterstützt?
Und dann, wie wir ein Knotenmodul nutzen können, mit
dem wir das Hochladen von Dateien unterstützen können.
Dateiuploads werden in der Regel über eine Formulareingabe unterstützt.
Wenn Sie also in einer Eingabe den Typ als Datei und
den Namen als Name des Feldes dort angeben,
dann können Sie die Datei angeben, die hochgeladen wird,
wenn Sie auf diese Schaltfläche zum Senden für dieses spezielle Formular klicken.
Wenn nun die Dateiinformationen auf die serverseitige Seite hochgeladen werden, werden
die Formulardaten selbst typischerweise entweder als
application/x-www-form-urlencoded oder multipart/form-data codiert.
Dann entwerfen Sie Ihr Formular, zum Beispiel entwerfen Sie Ihr Formular mit
Aktion, die auf /imageUpload bei REST-API-Neigung festgelegt ist,
was als Endpunkt fungiert, zu dem Sie den Beitrag des Bildes ausführen.
Damit die entsprechende Methode post und der Codierungstyp wäre,
würden Sie sie auf multipart/form-data innerhalb Ihres Formulars setzen.
Das bedeutet also, dass die Formularelemente in den Codierungstyp codiert
und dann auf die serverseitige Seite hochgeladen werden.
Dateiupload ist effizienter mit Multipart-/Formulardaten.
Und daher ist das der bevorzugte Ansatz, den wir zum Hochladen von Dateien verwenden.
Nun, wenn Sie mehr Details über Datei-Upload und
Formular-Upload und Anwendung Anwendung/x-www-form-urlencoded oder
die Multipart/form-Daten wissen möchten, dann können Sie die HTML5
(W3C Recommendation) lesen, wo die Details angegeben sind, und
auch die entsprechende IETF Request for Comented Dokumente.
Ich habe Links zu diesen in den zusätzlichen Ressourcen, falls Sie mehr
über die tatsächlichen Details erfahren möchten, wie diese Formularcodierungstypen unterstützt werden.
Aus unserer Sicht, wenn wir die Multipart/Form-Daten verwenden,
wenn dies in einer
HTTP-Anforderungsnachricht enthalten ist, die auf die Serverseite geht, dann
haben Sie im Header der Anforderungsnachricht einen Inhaltstyp auf multipart/form-data gesetzt.
Und dann auch ein Grenzwert so eingerichtet.
Die Begrenzung trennt die mehrere Teile des Anforderungstextes.
Der Anforderungstext selbst der ausgehenden Anforderungsnachricht wird also
in mehrere Teile unterteilt.
Und jedes Teil wird vom vorherigen Teil abgegrenzt,
indem diese Grenze hier verwendet wird.
Nun, um Ihnen die Details weiter zu veranschaulichen, habe ich den
Server manipuliert, um diese Informationen aus der eingehenden Anforderungsnachricht auszudrucken.
Damit wir das etwas genauer untersuchen können.
Wenn Sie sich die Details für
eine bestimmte Nachricht ansehen, die ich von meinem Postboten auf die Serverseite gesendet habe,
können Sie feststellen, dass ich hier die Anforderungskopfzeilen gedruckt habe.
Und insbesondere im Anforderungskopf, lassen Sie mich Ihre Aufmerksamkeit auf diesen Header
hier lenken, den sogenannten Inhaltstyp, der auf multipart/form-data gesetzt ist.
Und dann notieren Sie insbesondere die Grenze, die hier
mit dieser langen Zahl definiert ist.
Das ist also der Anforderungsheader für
die eingehende Anforderungsnachricht, die ich mithilfe der Post-Methode gepostet habe.
In der Tat ist dies genau die Anforderungsnachricht, die ich
in der Übung verwenden werde, die dieser Vorlesung folgt, um die Datei hochzuladen.
Also, wenn wir die Datei dort hochladen, werden Sie bemerken, dass
im Anfragetext, also hier drucke ich den Anfragetext unten aus.
Und im Anfragetext
werden Sie feststellen, dass es diese bestimmte Zeile hier ausdruckt.
Und das entspricht der hier angegebenen Grenze.
Diese Grenze gibt also im Wesentlichen die Trennung zwischen den verschiedenen Teilen
des mehrteiligen Körpers an, der Teil dieser Anforderungsnachricht ist.
Im Anforderungskörper sehen Sie, dass dies hier definiert wird.
Darüber hinaus geben Sie auch die gleiche Content-Disposition wie Formulardaten an,
was bedeutet, dass sie dies als Formulardaten und
den entsprechenden Namen a s ImageFile interpretieren.
Und der Dateiname selbst von der Client-Seite, die hochgeladen wurde,
wird hier der Dateiname selbst angegeben.
Und dann unten steht Content-Type: image/png.
Also lade ich diese PNG-Bilddatei hier hoch.
Dies sind also die Details, die hier beschrieben werden.
Und wenn Sie in den Anforderungstext selbst scrollen,
sehen Sie die Details dessen, was im Anforderungstext enthalten ist.
Also dies in der PNG-Datei hier, werden Sie diese Informationen in der PNG-Datei sehen.
Wenn Sie also die PNG-Datei öffnen, würden Sie dies hier sehen.
Dies enthält also eine ganze Reihe von Zeichen hier,
die offensichtlich auf dem Bildschirm nicht gedruckt werden können.
Wenn Sie also nach unten scrollen, werden Sie diese ganze Menge von Informationen,
die tatsächlich im Anforderungstext der
Anforderungsnachricht enthalten ist, die diese bestimmte Datei auf die serverseitige Seite hochlädt.
Sie sehen also, dass dieser Körper tatsächlich die codierte Version
des Bildes enthält.
Und das ist das Ende der Grenze für diesen Anforderungstext.
In unserer Anfragenachricht haben wir hier nur eine Datei enthalten.
Sie können auch mehrere Dateien hochladen, wenn Sie möchten.
Aber dann müssen Sie das npm-Modul entsprechend konfigurieren, um
mehrere Dateien zu akzeptieren.
So enthält Ihr Anforderungstext selbst die codierte Version
des Bildes, von der Ihr Server das Image extrahiert
und es dann in der Datei mit demselben Dateinamen auf der Serverseite speichert.
So konfigurieren wir unsere Anwendung, die serverseitige Anwendung,
in der Übung, die dieser Vorlesung folgt.
Also dachte ich, dass es ein interessanter
Schritt sein wird, um Ihnen genau zu zeigen, was mein Server empfängt.
Und so wird das sagen, warum wir diese Grenze hier spezifizieren.
Und wie
wir innerhalb des Anforderungskörpers selbst die Grenze verwenden, um die verschiedenen Teile des Anforderungskörpers abzugrenzen.
So kann die serverseitige, wenn sie verarbeitet
wird, die Bilddaten aus dem Anforderungstext entsprechend extrahieren
und dann die Bilddatei auf der Serverseite speichern.
So wie ich im Terminal
dort gezeigt habe, trennt diese Grenze den Multipass-Anforderungsteil.
Und so sahen Sie die dort angegebene Grenze.
Um mit den mehrteiligen Formulardaten zu arbeiten, die im Anforderungstext enthalten sind,
verwenden wir ein NPR-Modul, das die Verarbeitung
von mehrteiligen Formulardaten unterstützt, die innerhalb des Anforderungstextes enthalten sind.
Es extrahiert automatisch alles für Sie und
lädt es dann auf zwei Objekte auf dem Anforderungsobjekt auf der Serverseite.
Also dieses npm-Modul namens Multer, die, wenn
auf Ihrer serverseitigen Anwendung installiert und
konfigurieren Sie Ihren Express-Server Multer zu verwenden.
Dann können Sie die eingehende Anforderungsnachricht verarbeiten, die
diese Multipart-/Formulardaten in der Anforderungsnachricht enthält.
Multer ist also das Knotenmodul, in dem das
dem Server hilft, Multipart/Form-Daten zu verarbeiten.
Dies wird auf einem anderen npm-Modul namens busboy geschrieben.
Busboy ist ein Modul, das eingehende HTML-Formulardaten, allgemeine HTML-Formulardaten verarbeitet.
Multer setzt Busboy ein, damit Sie
mehrteilige /form-Daten auf Ihrer Serverseite verarbeiten können.
Wenn diese Informationen analysiert werden, lädt Multer
die eingehenden Formulardaten hoch und fügt der req ein Körperobjekt hinzu.
Sie haben also ein req.body-Objekt und auch ein req.file-Objekt.
Wenn Sie eine einzelne Datei hochladen, wird es req.file-Objekt fortgesetzt.
Wenn Sie dann Ihren Multer so einrichten, dass er mehrere Datei-Uploads akzeptiert,
können Sie das req.files-Objekt einrichten.
Das Files-Objekt wird ein Array sein, das alle Informationen für
jede bestimmte Datei enthält, die auf der Serverseite hochgeladen wird.
Das Dateiobjekt selbst enthält Informationen,
die zusammenfassen, wie die Datei serverseitig von Multer gespeichert wird.
Mit diesem schnellen Verständnis, wie Datei-Upload funktioniert,
gehen wir auf die Übung, wo wir tatsächlich das Multer-Modul konfigurieren.
Und dann verwenden Sie es innerhalb unserer Express-Anwendung, um Datei-Uploads
von der Client-Seite zu verarbeiten.
( MUSIK)