‫Dozent: Lassen Sie uns nun
‫Benutzern erlauben, ihre Fotos direkt auf unserer Website hochzuladen.
‫Und das ist es, was wir wollen.
‫Wenn wir hier klicken, möchten wir
‫im Grunde ein neues Fenster öffnen, für
‫das wir ein neues Bild zum Hochladen auswählen können. Wenn wir
‫dann auf diese Schaltfläche klicken
‫und ein Formular senden, möchten wir natürlich dieses
‫Bild in unser Backend hochladen und den Benutzer aktualisieren , Rechts.
‫Der erste Schritt dazu
‫besteht darin, unserem HTML-Code ein neues Eingabeelement hinzuzufügen.
‫Also im Grunde zu unserer Paketvorlage, die
‫es dann ermöglicht, die Dateiauswahl zu öffnen,
‫wenn wir hier klicken.
‫Kommen wir also zu unseren
‫Ansichten und zur Rechenschaftslegung. In diesem Formular müssen wir
‫nun diese Eingabe hinzufügen.
‫Im Moment haben wir also diesen Link hier, der ein neues Foto sagt.
‫Aber natürlich ist es kein Link, den wir verwenden werden.
‫Das war also wirklich nur ein Platzhalter.
‫Also lass es uns loswerden.
‫Was wir also brauchen, ist ein Input.
‫Aus, um Datei einzugeben.
‫Alles klar, also zuvor hatten wir für den
‫Namen eine Eingabe mit dem Typ Text.
‫Wir haben auch eine Eingabe mit der Art
‫der E-Mail und es gibt auch eine spezielle für das Passwort.
‫Also Eingabe für Passwort und
‫für Dateien gibt es natürlich eine für Dateien.
‫Wir können dann angeben, welche Art von Datei wir tatsächlich akzeptieren.
‫Und wir können so etwas tun.
‫Bild und dann alle.
‫Es werden also grundsätzlich alle Formate
‫akzeptiert, die einen mit Bild
‫beginnenden Denktyp haben.
‫Geben wir diesem nun auch hier
‫einen Klassennamen, damit es auf unserer Seite schön formatiert erscheint.
‫Dies ist also der Klassenname, den ich in meiner CSS habe.
‫Und jetzt auch eine ID geben, damit wir sie dann
‫in Java-Skript auswählen können.
‫Fügen Sie das als Foto hinzu und schließlich geben wir
‫ihm wie die anderen Felder auch einen Namen.
‫Also auch Name des Fotos.
‫Und natürlich ist es ein Foto, denn das
‫ist der Name, den wir in unserem
‫Benutzerdokument haben und es ist auch der Feldname, den Multer erwartet.
‫Das hier ist also Upload und dann geben wir auch noch ein Label
‫dafür an.
‫Und wir setzen es auf
‫vier und dann die ID des Eingabeelements, in Ordnung.
‫Ich bin mir also nicht
‫sicher, ob Sie damit vertraut sind, wie das in HTML
‫funktioniert, aber es ist auch nicht wirklich wichtig.
‫Wenn wir also hier auf dieses
‫Label klicken, wird tatsächlich das Eingabeelement aktiviert,
‫das die ID hat, die wir
‫hier im Formular angeben.
‫In diesem Fall ist das also das Foto, in Ordnung.
‫Und tatsächlich ist es
‫dieses Label hier, bei dem der Text ein neues Foto auswählen wird.
‫Wenn wir dann auf das Label
‫klicken, wird diese Eingabe
‫aktiviert, wodurch wiederum das Fenster geöffnet wird,
‫in dem wir eine Datei auswählen können.
‫Und das ist alles, was wir für die Eingabe hier tun müssen.
‫Nach wie vor gibt es zwei Möglichkeiten, diese
‫Daten an den Server zu senden.
‫Also zunächst ohne die API, wie wir es in einem
‫früheren Vortrag getan haben.
‫Wir finden bereits die Aktion, die wir durchführen
‫möchten, und auch die Methode.
‫Und damit werden die
‫Daten dann direkt an den Server gesendet.
‫Wenn wir nun eine Datei mit
‫dieser Methode senden wollten, müssten wir hier
‫eine andere Option angeben.
‫Und das ist der enc-Typ.
‫Der enc-Typ müsste also aus mehrteiligen Formulardaten bestehen.
‫Also mehrteilige Schrägstrich-Formulardaten, in Ordnung.
‫Und so haben wir auch hier wieder diesen Namen mehrteilig.
‫Wie bereits erwähnt, dient
‫Multipart immer zum Senden von Dateien an den Server.
‫Und wieder brauchen wir tatsächlich die
‫Multer-Middleware, um diese mehrteiligen Formulardaten zu verarbeiten, in Ordnung.
‫Und eigentlich kommt der Name Multer von mehrteilig.
‫Also mult, mult, okay.
‫Wie auch immer, wenn wir die Daten ohne
‫API senden wollten, müssten wir immer
‫diesen Enc-Typ angeben.
‫Andernfalls würde das Formular die Datei einfach
‫ignorieren und nicht senden, okay.
‫Aber wie wir bereits wissen,
‫verwenden wir es tatsächlich mit der API, richtig.
‫Wir müssen diesen enc-Typ also
‫nicht angeben, sondern müssen dies programmgesteuert tun.
‫Also lassen Sie uns das tatsächlich tun.
‫Lassen Sie uns nun unsere Daten senden, einschließlich
‫natürlich des Fotos, indem wir einen API-Aufruf
‫durchführen, wie wir es im letzten Abschnitt getan haben.
‫Und so müssen wir jetzt in unserem öffentlichen Ordner öffnen und von
‫deren js aus öffnen wir index. js.
‫Und genau hier senden wir
‫die zu aktualisierenden Daten auf den Server.
‫Nun, wir senden sie nicht
‫wirklich hierher, sondern wählen sie aus dem Formular
‫aus und übergeben sie dann an die Update-Einstellungen.
‫In Ordnung, aber erinnern Sie sich
‫jetzt daran, wie ich sagte,
‫dass wir mehrteilige Formulardaten programmgesteuert neu erstellen müssen?
‫Und deshalb müssen wir es so machen.
‫Nennen wir es Formular und dann neue Formulardaten.
‫In Ordnung, und jetzt müssen wir
‫in diesem Formular immer wieder neue Daten anhängen.
‫Und grundsätzlich ein Append für jede der Daten,
‫die wir senden möchten.
‫Also formen. anhängen und der erste ist der Name.
‫Also geben wir hier name an und dann den Wert des Namens.
‫Und das ist natürlich dieser hier.
‫Also greifen wir das, fügen Sie es hier ein und duplizieren Sie es.
‫Und als nächstes kommt die E-Mail, okay.
‫Dann lassen Sie uns das loswerden, geben Sie in die Update-Einstellungen ein.
‫Wir übergeben dann das Formular, okay.
‫Und oder ein Textaufruf mit
‫axios erkennt dieses
‫Formular hier tatsächlich als
‫Objekt und funktioniert wie zuvor, okay.
‫Hier in den Update-Einstellungen, wo
‫wir die Daten übergeben,
‫die dann hier in die axios-Anfrage übergeben
‫werden, müssen wir also nichts ändern.
‫Okay, das entspricht also dem, was wir vorher mit
‫Name und E-Mail hatten, aber jetzt fügen wir
‫natürlich auch das Foto hinzu, was der einzige
‫Grund ist, warum wir es jetzt
‫so machen müssen.
‫Also formen. dann nochmal den namen anhängen wir
‫wollen es natürlich nochmal anhängen, foto und
‫dann dokumentieren. getelementbyid,
‫das auch ein Foto ist, aber jetzt nicht mehr. Wert, sondern .
‫Dateien, alles klar.
‫Und diese Dateien befinden
‫sich tatsächlich im Array, und da es
‫nur eine gibt, müssen wir das
‫erste Element im Array auswählen, und das ist null.
‫Alles klar, und loggen
‫wir dieses Formular tatsächlich in die Konsole ein, bis wir einen kurzen Blick darauf
‫werfen, was dieses Formular tatsächlich ist.
‫Aber kurz gesagt, wie ich bereits sagte, erstellen
‫wir diese mehrteiligen Formulardaten im Grunde neu.
‫Und deshalb heißt es eigentlich Formulardaten, weil
‫Formulardaten auch hier
‫in diesem mehrteiligen Enc-Typ vorliegen, okay.
‫Also, ich denke, das reicht uns eigentlich,
‫um das jetzt auszuprobieren.
‫Wie gesagt, in den Update-Einstellungen müssen
‫wir nichts ändern und auch den
‫Update me-Endpunkt, an den
‫wir dieses Anforderungstool senden, damit dieses
‫auch bereits funktioniert und bereit ist, Bilder zu akzeptieren
‫und sogar die Größe zu ändern, richtig.
‫Und so lassen Sie uns jetzt weitermachen und dies versuchen.
‫Und so lasst uns das noch einmal neu laden.
‫Also mal sehen, und tatsächlich
‫bekommen wir jetzt unsere Dateiauswahl im Grunde.
‫Dieses Fenster, in dem wir jetzt die
‫Datei auswählen können und was ich
‫tun werde, besteht darin, im
‫Grunde das Originalbild zurückzusetzen, das wir für diesen Benutzer hatten.
‫Das ist also auf
‫Desktop, Natours, Public, Image-Benutzer, und es war Benutzer 11, also dieser.
‫Und das ist jetzt hochgeladen.
‫Also öffnen, in den Einstellungen speichern und die Datenaktualisierung ist erfolgreich.
‫Jetzt spiegelt es sich hier nicht sofort wieder.
‫Weder hier noch hier oben, aber
‫es sollte so sein, sobald wir diese Seite hochladen.
‫Und wir könnten es zwar auch
‫mit Java-Script machen, aber das ist eigentlich viel Arbeit.
‫Ich hatte es versucht und ich habe
‫es getan, aber dann dachte ich, dass es einfach
‫zu viel Arbeit ist und es nicht wert ist, es hier umzusetzen.
‫Aber wie auch immer, nur um zu testen, ob es tatsächlich
‫funktioniert, müssen wir die Seite jetzt neu laden.
‫Und es tat.
‫Hier ist nun das neue Bild, das wir gerade hochgeladen haben.
‫So großartig.
‫Werfen wir einen Blick auf den Ordner selbst.
‫Wenn es auch tatsächlich da ist und
‫ob es richtig transformiert wurde.
‫Das ist also ein Bild.
‫Laden wir es hier neu.
‫Und jetzt bin ich mir nicht sicher, welches es ist.
‫Ach genau.
‫Also 500 mal 500
‫und jetzt ist es komplett unscharf, weil das Originalbild viel kleiner war.
‫Aber egal, das ist völlig egal.
‫Wichtig ist, dass wir
‫jetzt tatsächlich Fotos direkt aus diesem Formular hochladen können.
‫Ich möchte das ist alles, um einen Blick
‫auf unsere Konsole hier auf die Formulardaten zu werfen,
‫von denen ich dachte, dass wir sie protokolliert hätten und die hier nicht erschienen sind, weil wir
‫die Seite bereits neu geladen haben.
‫Aber wie auch immer, ich wollte das andere Bild hierher zurückstellen.
‫Also diejenige, die wir zuvor hochgeladen haben und die in
‫dev-data, image und aarav ist.
‫Alles klar, Daten erfolgreich aktualisiert.
‫Schauen wir uns hier kurz unsere Telefondaten an.
‫Ah, aber ich denke, wir können nicht wirklich sehen, was wir hier haben.
‫Mal sehn.
‫Nein, wir können nicht wirklich sehen, was wir haben.
‫Okay, ich habe mir das nie angeschaut.
‫Und ich dachte, wir könnten die Informationen vielleicht
‫sehen, aber egal.
‫Wichtig ist, dass es tatsächlich funktioniert hat.
‫Also, wenn wir jetzt neu laden, dann ist dieses
‫ältere Image natürlich wieder da.
‫Großartig, also fühlt sich diese Anwendung wieder mehr
‫und mehr nach echter Arbeit an.