In der vorherigen Lektion
haben wir gelernt, wie Datei-Uploads
durch den Multi-Plattform-Datenansatz unterstützt werden.
In dieser Übung nutzen wir das Multer-Modul, auf
das wir in der Vorlesung verwiesen haben, damit unser Express-Server das
Hochladen von Bilddateien auf unsere Serverseite unterstützen kann.
Sie werden diese Bilddateien in den Ordner öffentlich/images speichern.
Diese Bilder wären in unserer Anwendung nützlich, wenn wir
Bilder für die verschiedenen Gerichte oder die Radare oder die Aktionen liefern,
die wir in unserem REST API Server erstellt haben.
Um mit dieser Übung zu beginnen,
ist der erste Schritt natürlich, das Multer-Modul zu installieren, so geben Sie an der Eingabeaufforderung npm install
multer minus save und im Moment verwende ich multer 1.3.1 in diesem Kurs.
Sobald wir also das Multer-Modul installiert haben,
gehen wir zu unserem Projekt und implementieren dann eine neue Route, die es uns ermöglicht, Dateien hochzuladen.
Gehen Sie in das Projekt im Routenordner,
lassen Sie uns eine neue Datei namens upload router.js hinzufügen.
Dieser Router, Express-Router, den wir hier implementieren werden,
ist derjenige, der das Hochladen der Dateien unterstützen wird.
Also, im Upload-Router lassen Sie mich einfach
zum Dish Router gehen und diese ersten paar Dinge vom Dish Router kopieren,
weil wir ziemlich viel werden, um eine
ähnliche Struktur in unserer Anwendung oder dem Upload-Router einrichten.
Also, lassen Sie mich den Teil kopieren und dann werden wir das bearbeiten.
Also, im Upload-Router,
ich brauche keinen Mungo, also werde ich Mungo entfernen und ich brauche das Geschirr auch nicht.
Also, diese beiden würden entfernt werden und danach
müssen wir Body Parser ausdrücken und authentifizieren.
Jetzt werde ich das Multer-Modul hier benötigen.
Sobald wir das Multer-Modul einschließen,
jetzt diesen Router werde ich dies als Upload-Router nennen.
Also, wird sagen, Upload-Router verwenden Body Parser und
dann dieser, aber der Upload-Router und wieder,
denken Sie daran, Modul-Exporte zu sagen, laden Sie Router hier hoch.
Also, für die Upload-Router-Route,
müssen wir die verschiedenen Methoden hinzufügen.
Ich werde das ein wenig später tun, aber vorher lassen Sie
uns Multer einrichten, damit wir die Dateien hochladen können.
Nun kann Multer standardmäßig eingerichtet werden, indem Sie einfach Multer innerhalb unserer Anwendung verwenden,
aber ich werde eine Konfiguration von Multer in
dieser Übung durchführen, so dass wir die Art und
Weise anpassen, wie Multer den Upload der Dateien verarbeitet.
Um den Multer zu verwenden,
ist eine der Optionen, die Multer nimmt, für die Lagerung.
Also, Multer bietet diese Disk Storage Funktion, die
es uns ermöglicht, die Speicher-Engine zu definieren und hier können wir ein paar Dinge konfigurieren.
Wenn es nun nur darum geht, das Ziel zu konfigurieren,
können Sie einfach den höchsten Doppelpunkt sagen
und dann den Zielordner angeben, in dem die hochgeladenen Dateien gespeichert werden.
Aber hier werde ich einige weitere Konfiguration für das Multer-Modul hier durchführen.
Also, hier werde ich die Multer-Festplattenspeicher-Unterstützung verwenden.
Innerhalb des Datenträgerspeichers
kann ich hier ein paar Optionen definieren.
Die Optionen, die ich definieren werde, werden
Ziel sein und die zweite ist Dateiname.
Also, zwei Konfigurationen, die ich an den Datenträgerspeicher liefern werde.
Das Ziel, wie Sie es erwarten würden,
erlaubt mir, das Ziel zu konfigurieren und dies nimmt
als Konfiguration hier eine Funktion ein.
So wird das Ziel hier als Funktion konfiguriert.
Diese Funktion erhält Anfrage und auch ein Objekt namens Datei, das
Informationen über die Datei enthält, die
von multer verarbeitet wurde, und auch eine Callback-Funktion.
Also, cb ist die Callback-Funktion.
Also, hier für das Ziel,
werde ich cb null sagen,
der zweite Parameter ist der Zielordner
, der als String ausgedrückt werden kann, in dem die Dateien gespeichert werden.
Also, hier drin, werde ich das Ziel als öffentliche Schrägstriche Bilder liefern.
Denn in dieser Übung werde ich Bild-Uploads unterstützen.
Also, das ist der Teil, den ich hier angeben werde, also Bild-Upload.
Also, die Callback-Funktion, wie Sie sehen, nimmt zwei Parameter.
Der erste ist natürlich der
Fehler, den ich in diesem Fall auf
null setzen werde und der zweite ist der Zielordner,
in dem meine Bilder gespeichert werden.
Also kann ich das konfigurieren, indem ich öffentliche Schrägbilder sage.
Also, im Bilderordner
werden die Dateien, die ich hochlade, gespeichert.
Für den Dateinamen
erhält er auch die drei Parameter,
Request Message, file und die Callback-Funktion.
Von der Konfiguration der Art, wie die Callback-Funktion aufgerufen wird,
können wir Informationen über den Dateinamen angeben.
Also, für die Callback-Funktion würde ich cb null sagen und es gibt keinen Fehler hier.
Dann besteht die zweite auf dem Dateinamen, der
für die spezifische Datei verwendet wird, die gerade hochgeladen wurde, und
wie sie gespeichert werden soll.
Also, dieses Dateiobjekt, das ich hier erhalten habe,
unterstützt eine Reihe von mehreren Eigenschaften darauf.
Eine der Eigenschaften heißt, Originalname.
Also, der ursprüngliche Name im Wesentlichen,
gibt uns den ursprünglichen Namen der Datei von der Client-Seite, die hochgeladen wurde.
Ich bestehe darauf, dass, wenn die Datei auf der Serverseite gespeichert
wird, die Datei genau den gleichen Namen
wie der ursprüngliche Name der hochgeladenen Datei erhält.
Damit ich wissen kann, dass ich
genau die gleiche Datei hochlade und auf der Serverseite beim
Hochladen der Datei mit dem gleichen Namen gespeichert wird.
Wenn Sie dies jetzt nicht konfigurieren,
gibt multer standardmäßig eine zufällige Zeichenfolge
als Namen der Datei ohne Erweiterungen.
Also, das ist vielleicht nicht etwas, das Sie
gerne in dieser speziellen Übung verwenden würden.
Deshalb konfiguriere ich explizit, dass die
Datei mit dem ursprünglichen Namen der Datei gespeichert werden sollte, die hochgeladen wurde.
Wir werden dieses Dateiobjekt wieder
etwas detaillierter begegnen und sehen, wie wir die
Informationen aus dem Dateiobjekt ein wenig später nutzen können.
Darüber hinaus kann ich hier auch einen Dateifilter für die Multer-Konfiguration angeben.
Mit dem Dateifilter kann ich angeben, welche Art von Dateien
ich hochladen möchte oder die ich bereit bin, für das Hochladen zu akzeptieren.
Also, dafür werde ich eine andere Funktion namens
const image file filter einrichten
und diese werde ich die Funktion in einer Minute definieren.
Nun, dafür kann ich das auch als
const-Speicher speichern, weil wir const für alles verwendet haben
, also sage ich einfach const storage.
Für den Bilddateifilter
sage ich const Bilddateifilter.
Wieder erhält es drei Parameter Anfrage,
Objekt, das Dateiobjekt, das die Informationen über
die Datei enthält, die hochgeladen wurde, und die Callback-Funktion hier.
Durch die Callback-Funktion
werde ich Informationen an meine Multer-Konfiguration zurückgeben, mit der
ich angeben kann, wie ich diese Informationen speichern soll.
Also, das wird hier eine Pfeilfunktion sein.
Innerhalb dieser Pfeilfunktion, worauf ich überprüfen
werde, ist, dass ich sagen, wenn nicht der ursprüngliche Dateiname übereinstimmt.
Also, der ursprüngliche Name ist hier eine Zeichenfolge.
Also versuche ich zu sehen, ob es eine Übereinstimmung für diese Zeichenfolge gibt, indem ich sage, dass
hier ein regulärer Ausdruck ist.
Also, der reguläre Ausdruck, den ich als Schrägstrich,
Backslash Punkt und dann,
die Optionen, die ich angeben werde, sind jpg
oder jpeg oder
png oder gif.
Also, so spezifiziere ich den regulären Ausdruck dort.
Um das in Ordnung zu sagen,
wenn die Erweiterung der Datei jpg oder jpeg oder png oder gif enthält,
dann werde ich das als Bilddatei behandeln und ich werde bereit sein, diese Dateien zu akzeptieren.
Also, das ist es, was wir hier testen.
Wenn das der Fall ist,
das ist, wenn die Dateierweiterung nicht mit einem dieser Dinge übereinstimmt,
so, deshalb sehen wir nicht, dann werden wir sagen, zurück cb.
Beachten Sie dann, dass der cb der erste Parameter ein Fehler sein würde.
Also, ich werde einen neuen Fehler zurückgeben, der
besagt, dass Sie nur Bilddateien hochladen können.
Wir bestehen also darauf, dass die einzigen Dateien, die sie
akzeptieren, Bilddateien sind und der zweite Parameter falsch wäre.
Da wir den Fehler als ersten Parameter liefern,
wird der zweite Parameter auf false gesetzt.
Das sonst sagt cb null true.
Also, was bedeutet, dass die Datei, die
hochgeladen werden versucht, entspricht dem Muster und so ist es eine Bilddatei,
und so sind wir bereit, es hochgeladen werden zu lassen.
Zwei Konfigurationen, die wir diesem Multer-Modul liefern werden.
Wie konfigurieren wir das Multer-Modul für die Verwendung innerhalb unserer Anwendung?
Dies ist, wo ich const upload
als Multer deklarieren und dann würde ich in Klammern angeben, dass Optionen hier.
Ich kann den Speicher als Speicherfunktion angeben, die ich gerade hier definiert habe.
Diese Speicherfunktion als erster Parameter,
und der zweite Parameter ist ein Dateifilter.
Ein Dateifilter ist eine Methode, mit der ich angeben kann
, welche Art von Datei ich bereit bin zu akzeptieren, und dann werde ich sagen, Bilddateifilter.
Schalten Sie einfach den Zeilenumbruch ein,
damit Sie hier die gesamte Zeile sehen können.
Also, es heißt, Sie können nur Bilddateien hochladen und dann für den Multer
konfiguriere ich den Bildfilter, das war's.
Mein Multer-Modul ist jetzt so konfiguriert, dass ich die Bilddateien hier hochladen kann.
Dann lassen Sie uns jetzt voran und konfigurieren Sie den Upload-Router.
Für den Upload-Router
werde ich hier nur die Post-Methode zulassen.
Daher sind die
Methoden get, put und delete auf dem Upload-Router-Endpunkt nicht erlaubt.
Um mir dabei zu helfen,
gehe ich zum Geschirr-Router und erinnere mich daran, dass wir den Put hier bereits konfiguriert hatten.
Ich werde das kopieren und dann zum
Upload-Router kommen und dann werde ich diese Informationen hier einfügen.
Wir werden sagen, wenn es eine get Operation ist, dann werde ich nicht
unterstützen, dass auf dem Endpunkt ImageUpload wäre.
Das get wird nicht erlaubt,
und ähnlich wird der Put nicht erlaubt,
und auch das Löschen wird nicht erlaubt.
Ich werde keine dieser Operationen unterstützen, also setzen, löschen.
Diese drei werden nicht erlaubt sein.
Die einzige Methode, die ich unterstützen werde, ist die Post-Methode.
Für die Post-Methode
werden wir diese Authentifizierung bis zu diesem Punkt durchführen.
Ich werde das nur dort kopieren,
diesen Endpunkt schließen und für den Post.
Wenn eine Datei gepostet wird,
wie gehen wir mit diesem Beitrag um?
Um den Beitrag hier zu bearbeiten,
brauche ich dafür nicht den nächsten.
Nun, zusätzlich zum authentifizieren VerifyUser und authentifizieren VerifyAdmin, in
der gleichen Zeile werde ich den Upload konfigurieren.
Also, erinnern Sie sich, dass ich Upload mit Multer hier konfiguriert hatte.
Also werde ich den Upload verwenden, der
eine Funktion namens upload.single unterstützt.
Diese einzelne Funktion nimmt als Parameter.
Der Name des Formularfelds, das diese Datei angibt,
werden Sie das in kurzer Zeit sehen.
Dieses Formularfeld werde ich es hier als ImageFile benennen.
Einzel hochladen bedeutet, dass es mir erlaubt, nur eine einzelne Datei hier hochzuladen.
Diese einzelne Datei wird im Upload-Formular von der Clientseite
im mehrteiligen Formular Upload angeben, indem dieser Name dort verwendet wird.
Wenn die Datei im Code erhalten wird,
wenn ich zu diesem Punkt komme,
kümmert sich dieser Upload um die Behandlung der Fehler, wenn es irgendwelche gibt,
wenn die Datei nicht richtig hochgeladen wird und so weiter.
Wenn Sie zu diesem Zeitpunkt kommen,
wäre die Datei erfolgreich hochgeladen worden und
Sie müssen daher die hochgeladene Datei verarbeiten.
An dieser Stelle werden wir sagen res.StatusCode ist
200 und dann res.setHeader Content-Type,
'application/json'. Was ich hier tun werde, ist, dass
wir dieses req.file-Objekt vom Server zurück an den Client übergeben werden.
Dieses req.file-Objekt enthält auch den Pfad zur Datei dort und dieser Pfad kann
vom Client verwendet werden, um jeden Ort zu konfigurieren, an
dem er den Speicherort dieser Bilddatei kennen muss.
Wenn Sie beispielsweise versuchen, ein Gericht
auf die Serverseite und die Details des Gerichts auf die Serverseite hochzuladen,
können Sie das Bild auf den Server hochladen und dann
erhalten Sie die URL dieses Bildes zurück und dann fügen Sie vielleicht
die URL dieses Bildes in das json-Objekt ein, das das Gericht.
Laden Sie dann das Dish JSON-Dokument auf die Serverseite hoch.
Dann wird die req.file zurück an den Client übergeben,
die req.file, wie Sie sehen werden, wenn wir diesen Server ausführen,
die req.file enthält viele Informationen über
die Datei, die gerade hochgeladen wurde und daher werde ich
das untersuchen, um Informationen über die Datei zu erhalten, die ich gerade hochgeladen habe.
So werden wir die Post-Methode dort konfigurieren, das ist es.
Mein Upload-Router ist bereit, Uploads der Dateien zu akzeptieren.
Nun, alles, was ich tun muss, ist, zu app.js zu gehen und dann den Upload-Router zu konfigurieren.
Also, gehen Sie zu app.js
Wir haben bereits alle diese Router.
Also, lassen Sie mich einfach ihren LeaderRouter kopieren und
dann als UploadRouter konfigurieren.
Dies ist also in der UploadRouter-Datei hier.
Also, wir werden den UploadRouter konfigurieren und dann unten hier unten gehen,
wir werden jetzt den ImageUpload-Endpunkt konfigurieren.
Der ImageUpload-Endpunkt ermöglicht es mir, die Datei hochzuladen.
Dies wäre also UploadRouter. Das war's.
Meine Anwendung ist jetzt so konfiguriert, dass sie Datei-Uploads akzeptiert.
Also, lassen Sie uns die Änderungen speichern und dann gehen und schauen Sie sich an, wie unsere Anwendung funktioniert.
Gehen Sie zurück zum Terminal,
stellen Sie jetzt sicher, dass Sie Ihren MongoDB-Server in
einer der Terminalregisterkarten oder in einem der Befehle Windows laufen.
Im anderen Fenster
starten wir den Server.
Sobald unser Server betriebsbereit ist,
gehen wir zu Postman und senden oder vielmehr eine Datei von Postman hoch.
Wie ich bereits erwähnt habe,
verwenden Sie zum Hochladen einer Datei die Multipart/Form-Daten.
Also, zuerst, lassen Sie mich selbst einloggen.
Also, ich werde einen Beitrag über lokale Benutzer anmelden,
und ich werde mich als Administrator anmelden, weil
nur der Administrator seine Dateien dort hochladen kann.
Erinnern Sie sich, dass Ihr Server jetzt am sicheren Port ausgeführt wird.
Also, wir sagen https://localhost:3443,
und es gibt keine Autorisierung hier drin.
Lassen Sie mich also die Autorisierung hier ausschalten und dann die Anfrage an den Server senden.
Also, in Postman, wenn dies geschieht,
dass es sagt, dass keine Antwort erhalten konnte,
das liegt daran, dass Sie jetzt den sicheren Server ausführen.
In diesem Fall
wird Postman das selbstsignierte Zertifikat nicht akzeptieren, das eingeht.
Also, in diesem Fall, öffnen Sie die Einstellungen hier und in den Einstellungen,
unter dem Feld Allgemeine Einstellungen,
sehen Sie diese SSL-Zertifikatüberprüfung.
Schalten Sie diese Option aus, damit Ihr Postbote bereit ist,
das selbstsignierte Zertifikat anzunehmen, das wir auf der Serverseite installiert haben.
So können Sie Ihren Server auf
dem https://localhost:3443 User Login-Endpunkt kontaktieren.
Wenn wir also versuchen, sich jetzt anzumelden,
werden Sie jetzt sehen, dass Ihre Post-Anfrage
vom Server erfolgreich angenommen wurde
und der Server dann mit den Token-Informationen antwortet.
Um sicherzustellen, dass Postman Ihnen erlaubt, den sicheren Server zu kontaktieren,
klicken Sie auf Einstellungen und
deaktivieren Sie unter Allgemein die SSL-Zertifikatvalidierung.
Also, sobald Sie sich einloggen,
lassen Sie uns das Token hier kopieren.
Also, ich werde das Token hier kopieren.
Versuchen wir nun, die Datei hochzuladen.
Um die Datei hochzuladen, wie Sie bemerkt
haben, müssen wir diese Datei unter localhost: 3443 hochladen,
und der Endpunkt ist ImageUpload.
Für den ImageUpload hier,
im Header, müssen wir die Autorisierung konfigurieren.
Also, wir werden die Autorisierung konfigurieren,
und dann sagen Sie,
„Bearer“, und geben Sie das ein Token, das wir erhalten haben.
Behalten Sie also irgendwo eine Kopie des Tokens und kopieren Sie das Token in den Header.
Im Body, um eine Datei hochzuladen,
werden wir diese Formulardaten verwenden.
So können Sie die Multipart-/Formulardaten hier ausführen.
Wenn Sie also auf die Formulardaten klicken,
können Sie hier die Datei angeben, die Sie hochladen möchten.
Wenn Sie hier auf einen neuen Schlüssel klicken,
verwenden Sie diesen Schlüssel als ImageFile.
Daran erinnern, dass, wenn wir die Post-Methode auf der UploadRouter-Website konfiguriert,
wir angegeben, dass ein ImageFile hochladen.
Also, das ist der gleiche Schlüssel, den Sie hier verwenden werden.
Dann, wenn Sie den Schlüssel geben,
dann den zweiten Teil,
werden Sie dies hier von Text zu Datei setzen.
So können Sie die Datei als Wert für diesen bestimmten Schlüssel angeben.
Also, dann werden Sie sehen, dass diese Schaltfläche angezeigt wird, die sagt: „Dateien auswählen“.
Sie können das also öffnen und dann eine Datei auswählen, die Sie hochladen möchten.
Also, hier, ich gehe zu meinem,
ich habe eine Datei in einem meiner Ordner hier.
Also, ich werde nur in Asset-Bilder gehen,
und dann laden wir einfach eine PNG-Datei von hier hoch.
Sie können also sagen:
„Laden Sie die spezifische Datei hoch.“
Wie Sie sich erinnern,
haben wir unseren Server so konfiguriert, dass er nur ImageFile akzeptiert.
Also sagen wir: „Laden Sie diese bestimmte Datei hoch.“
Wenn Sie dann auf die Schaltfläche Senden klicken,
beachten
Sie, dass Sie dies im Körper mit Formulardaten konfigurieren müssen.
Also, die Multipart/Formulardaten, und dann der Schlüssel ist die ImageFile,
und der Wert ist die Datei, die Sie gerade ausgewählt haben,
und klicken Sie dann auf die Schaltfläche Senden.
Wenn Sie also auf die Schaltfläche Senden klicken,
wird die Datei auf Ihre Serverseite hochgeladen und
dann antwortet der Server mit diesem Objekt zurück.
Dies ist also, was im
req.file-Objekt enthalten ist, das sich hier im Anforderungsobjekt befindet.
Also, diese req.file, wie Sie sehen, enthält einen Feldnamen.
Feldname ist ImageFile.
Beachten Sie also, dass dies genau das gleiche ist wie dieses hier.
Der Originalname, also beachten Sie, dass der Originalname-Ausdruck alberto.png enthält,
was die Datei ist, die ich hochgeladen habe.
Jetzt können Sie sehen, warum ich, wenn ich
den Speicher und den Dateinamen konfiguriert habe, file.originalname gesetzt habe.
Also, das ist, was dort verwendet werden wird.
Hier sehen Sie den Codierungstyp,
den Mimetyp und das Ziel,
in welchen Ordner die Datei abgelegt wurde,
und den tatsächlichen Pfad der Datei,
den relativen Pfad vom Stamm des Serverordners.
Dieser Pfad zeigt also an, wo die Datei serverseitig zugänglich ist.
Wenn Sie beispielsweise die Details eines Gerichts oder einer Führungslinie konfigurieren,
würden Sie einfach die Bildeigenschaft des Führers für images/alberto.png verwenden.
Public sollte sowieso nicht verwendet werden, da der Öffentliche Ordner
derjenige ist, der als Stammordner für unseren Server fungiert.
Also, Sie müssen nur diese Images.alberto liefern.
Aus diesem Pfad, den Sie erhalten,
nachdem die Datei erfolgreich hochgeladen wurde,
extrahieren Sie diesen Teil und verwenden Sie ihn dann für das Bild in
Ihrem JSON-Dokument, das die spezifische Führungslinie beschreibt.
Also, so laden wir eine Datei hoch.
Nun, um Sie davon zu überzeugen, dass die Strafe tatsächlich hochgeladen wurde,
gehen wir zu unserem Projekt.
Gehen Sie zu unserem Projekt,
im Öffentlichen Ordner,
können Sie jetzt sehen, dass es einen Images Unterordner gibt.
Im Unterordner images
können Sie die Datei alberta.png sehen, die dort hochgeladen wurde.
Jetzt können wir weitere ImageFiles auf unsere serverseitige Seite hochladen.
Wenn Sie nun versuchen, eine Nicht-ImageFile hochzuladen,
würden Sie sehen, dass der Server keine
Nicht-ImageFile akzeptiert und dann zurückantwortet:
„Die Nicht-ImageFile kann nicht akzeptiert werden.“
Auf diese Weise werden wir unseren Express-Server so konfigurieren,
dass Uploads von ImageFiles von unserer Client-Seite akzeptiert werden.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, wie wir
das Meta-Modul verwenden, um unseren Express-Server so zu konfigurieren,
dass Dateiuploads auf einem /ImageUpload Rest API-Endpunkt akzeptiert werden.
Wenn wir auf dem Endpunkt posten,
wird die Datei in einen angegebenen Ordner auf der Server-Site hochgeladen.
Damit schließen wir diese Übung ab.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht 'Datei-Upload' zu machen.