Erstellen einer Benutzer -Avatar -Komponente mit node.js & transloadit

{{/if}}

Beachten Sie, dass wir ein verstecktes Feld enthalten, das den Benutzernamen enthält. Wir werden dies mit unserer Anfrage an Transloadit senden, damit es in unseren Vorlagen verwendet werden kann.

Fügen Sie nun das JavaScript hinzu, beginnend mit einer variablen Initialisierung mit unserem JSON -Lenkerhelfer:

<span>var sig = {{{ json sig }}};</span>

Jetzt binden wir das Transload -Plugin an das Upload -Formular:

<span>$(function() {
</span>  <span>$('#avatar-form').transloadit({
</span>    <span>wait: true,
</span>    <span>params: JSON.parse(sig.params),
</span>    <span>signature: sig.signature,
</span>    <span>fields: true,
</span>    <span>triggerUploadOnFileSelection: true,
</span>    <span>autoSubmit: false,
</span>    <span>onSuccess: function(assembly) {
</span>      <span>$('img#avatar').attr('src', assembly.results.thumbnail[0].url + '?' + (new Date()).getTime() );
</span>      <span>var derivatives = {
</span>        <span>thumbnail : assembly.results.thumbnail[0].url,
</span>        <span>medium : assembly.results.medium[0].url,
</span>        <span>large : assembly.results.large[0].url
</span>      <span>};
</span>      $<span>.ajax({
</span>        <span>type: 'post',
</span>        <span>url: '/avatar',
</span>        <span>data: derivatives,
</span>        <span>success: function(resp){
</span>          <span>console.log(resp);
</span>        <span>}
</span>      <span>})
</span>    <span>}
</span>  <span>});
</span><span>});</span>

Dies ist komplexer als die minimale Integrationsinitialisierung, die wir uns zuvor angesehen haben.

Wir ziehen die Parameter und die Signatur aus der SIG -Variablen, die wir auf dem Server generiert und dann als JSON codiert haben. Da der Params -Teil verschachtelt ist, verwenden wir JSON.Parse (), um es wieder in ein Objekt umzuwandeln, aus dem Transloadit die entsprechenden Parameter extrahiert.

In der Plugin -Initialisierung ist Warten auf true gesetzt. Dies bedeutet, dass wir warten, bis beide Dateien hochgeladen wurden

und , sie wurden verarbeitet.

Verwenden von Montage -Benachrichtigungen, über die Sie später im Abschnitt Erweiterter Nutzung lesen können - bedeutet, dass Sie nicht unbedingt darauf warten müssen, dass die Datei bearbeitet wird. In diesem Fall können Sie auf False warten.

Fields ist auf True eingestellt, um das Plugin mitzuteilen, dass wir zusätzliche Informationen einfügen möchten, wenn wir die Dateien zur Verarbeitung senden. In unserem Fall ist dies ein Feld verstecktes Formular namens Benutzername, das wir mit dem Benutzernamen des authentifizierten Benutzers bevölkern.

TriggerUploadonFileSelection wird verwendet, um die Datei an transloadit zu senden, sobald der Benutzer eine Datei ausgewählt hat, anstatt wenn das Formular eingereicht wird. AutoSubmit verhindert, dass es das Formular einreicht, sobald das Ergebnis von Transloadit zurückkommt, da wir das manuell selbst tun werden.

Der Onsuccess -Rückruf wird abgefeuert, wenn die Daten von Transloadit zurückkommen, was uns einen Datenhash in der Montage gibt.

Das Montageobjekt enthält eine Ergebniseigenschaft, die wiederum Eigenschaften für jeden unserer „Schritte“ enthält. Diese enthalten eine Reihe von Dateiobjekten. Da wir nur eine Datei hochladen, sind sie Arrays mit einem einzelnen Element. Jedes Dateiobjekt enthält eine Reihe von Eigenschaften, einschließlich des Originaldateinamens, Meta -Informationen, eindeutigen IDs von Transloadit und anderen Teilen. Um das gesamte Informationsumfang zu sehen, möchten Sie sie möglicherweise in der Konsole auszeichnen und einen Blick darauf werfen. Allerdings sind wir nur wirklich interessiert die URL -Eigenschaft, die die URL des generierten Bildes auf S3 enthält.

Alternativ möchten Sie möglicherweise die SSL_url -Eigenschaft verwenden, die mit URL identisch ist, aber über https.

Wir extrahieren einfach die drei URLs nach dem Namen des entsprechenden Derivats und erstellen dann einen Hash der drei Derivate und deren entsprechenden URLs.

Um dem Benutzer visuelles Feedback zu geben, schnappen wir uns auch die URL des Miniaturbilds und ändern den Avatar auf der Seite, um das neu genannte Bild anzuzeigen.

Schließlich verwenden wir AJAX, um diese Daten still an unsere Anwendung zurückzugeben.

Hier ist die Avatar -Route, um diese Daten zu erfassen:

<span>var sig = {{{ json sig }}};</span>

In der Produktion möchten Sie dies wahrscheinlich bereinigen und validieren.

Wie Sie sehen, nehmen wir den Hash der Ableitungsbilder und deren URLs, holen Sie sich den aktuell authentifizierten Benutzer von Req.User, setzen Sie die Avatar -Eigenschaft auf den bereitgestellten Hash und aktualisieren Sie das Benutzermodell.

Dies ist nur ein möglicher Ansatz. Für ein schnelleres Feedback möchten Sie möglicherweise den OnResult -Rückruf des Plugins verwenden, um die Miniaturansicht zu erhalten, sobald er generiert wurde, anstatt auf alle drei Derivate zu warten. Anstatt einen AJAX -Anruf von Ihrem Client -Code zu verwenden, um Ihren Server zu benachrichtigen, bevorzugen Sie stattdessen die Funktion zur Assembly -Benachrichtigung, die den zusätzlichen Vorteil des Ausführens der Assemblys im Hintergrund bietet, anstatt die Ausführung auf dem Client zu halten. Wenden Sie sich an die Plugin -Dokumentation, um den gesamten Optionsbereich zu erhalten.

, das unsere grundlegende Anwendung abschließt. Vergessen Sie nicht, die gesamte Quelle - einschließlich des Authentifizierungsmechanismus - ist auf Github vorbei.

Erweiterte Verwendung

Bevor wir abschließen, werfen wir einen kurzen Blick auf einige der fortgeschritteneren Aspekte von Transloadit.

Andere clientseitige Optionen

Sie müssen das bereitgestellte JQuery -Plugin nicht verwenden. Im Abschnitt Community -Projekte der Dokumentation finden Sie eine Reihe von Alternativen, darunter ein Plugin für Bootstrap, eine für Drag N 'Drop, ein Winkel -Plugin oder Unterstützung für einfache alte XHR.

Der XHR kann es wert sein, dass Sie sich genauer ansehen. Es handelt sich um eine Lösung mit Bare-Bones, die viel Flexibilität bietet und gleichzeitig Ihr eigenes Feedback bereitstellen muss-beispielsweise eine Art Upload-Anzeige. Es ist auch erwähnenswert, dass nach dem Hochladen der Datei versucht wird, zu bestimmen, wann die Montage durch Abfragen des Servers in Intervallen von 1000 ms abgeschlossen wurde.

Benachrichtigungen

Anstatt Benutzer darauf zu warten, dass ihre Uploads verarbeitet werden, können Sie Benachrichtigungen verwenden, um Ihre Anwendung zu pingen, wenn die Dateien fertig sind. Mit diesem Ansatz muss ein Benutzer nur warten, bis das Upload abgeschlossen ist.

Benachrichtigungen sind leicht aus einem Verbraucherort zu implementieren. Fügen Sie einfach eine Notify_url in Ihre Montageanweisungen hinzu, zum Beispiel:

<span>var sig = {{{ json sig }}};</span>

Wenn Ihre URL von Transloadit pinged wird, enthält der vorgesehene JSON ein Signaturfeld, mit dem Sie sicherstellen können, dass die Benachrichtigung tatsächlich von ihnen stammt. Dekodieren Sie einfach die Signatur mit Ihrem Auth Secret.

Während der Entwicklung möchten Sie dieses Proxy -Paket möglicherweise nutzen, um Ihre Montagebenachrichtigungen zu testen oder einen Tunneling -Service wie NGROK zu verwenden.

Zusammenfassung

In dieser zweiteiligen Serie haben wir einen umfassenden Blick auf Transloadit, einen Dateiverarbeitungsdienst, angesehen.

In Teil eins haben wir einige der Vor- und Nachteile durchgemacht und uns dann die Schlüsselkonzepte angesehen.

In diesem Teil haben wir uns die Hände schmutzig gemacht und eine einfache Benutzer -Avatar -Komponente mit JQuery, Node.js und Express erstellt.

Sie sind nicht auf JQuery beschränkt und können in der Tat eine Vanille -JavaScript -Lösung oder Ihr Lieblings -Framework verwenden. Sie müssen es nicht einmal von einer clientseitigen Anwendung verwenden, und wenn es um serverseitige Technologien geht, haben Sie eine Vielzahl von Optionen. Hoffentlich haben Sie jetzt eine Wertschätzung dafür erhalten, wie es für die Bildhandlung verwendet werden kann.

Verwenden Sie Transloadit in Ihren Projekten? Kennen Sie einen besseren Service? Lass es mich in den Kommentaren wissen.

häufig gestellte Fragen (FAQs) zur Benutzer -Avatar -Komponente in Node.js mit Transloadit

Wie kann ich das Erscheinungsbild des Avatars in node.js mit transloadit anpassen? Sie können die Größe, Form und Farbe des Avatars ändern. Passen Sie beispielsweise den Parameter „Größen“ an, um die Größe zu ändern. Verwenden Sie zum Ändern der Form den Parameter „Ernte“. Mit den Parametern "Wasserzeichen" bzw. "Text" können Sie auch einen Wasserzeichen- oder Overlay-Text in den Avatar hinzufügen.

Implementieren der Benutzer-Avatar-Komponente in einer realen Anwendung umfasst die Integration in den Benutzerregistrierungs- oder Profil-Update-Prozess Ihrer Anwendung. Wenn ein Benutzer sein Profil registriert oder aktualisiert, können Sie Transloadit verwenden, um einen Avatar basierend auf den Details des Benutzers zu generieren. Sie können dann die URL des Avatars in Ihrer Datenbank speichern und sie verwenden, wo Sie den Avatar des Benutzers anzeigen müssen. Transloadit beinhaltet das Anhören von Fehlerereignissen in Ihrer Baugruppe. Wenn während des Montageprozesses ein Fehler auftritt, wird Transloadit ein "Fehler" -Ereignis ausstrahlen. Sie können auf diese Veranstaltung zuhören und angemessen umgehen. Zum Beispiel möchten Sie möglicherweise den Fehler protokollieren, den Benutzer benachrichtigen oder die Baugruppe wiederholen.

Kann ich Transloadit für die Benutzer-Avatar-Generation in einer nicht-node.js-Umgebung verwenden? und Java. Sie können diese APIs verwenden, um Transloadit in Ihre Nicht-Node.js-Anwendung zu integrieren. Transloadit umfasst die Feinabstimmung Ihrer Montageanweisungen und die effektive Verwaltung Ihrer Ressourcen. Zum Beispiel können Sie die Größe der generierten Avatare reduzieren, um Bandbreite und Speicherplatz zu sparen. Sie können auch die Funktion von Transloadit 'Auto_Retry' verwenden, um fehlgeschlagene Assemblys automatisch erneut zu verfolgen, die die Zuverlässigkeit Ihres Avatar -Erzeugungsprozesses verbessern können.

Testen der Benutzer -Avatar -Komponente umfasst das Erstellen von Unit -Tests für Ihre Montageanweisungen und Integrationstests für die Integration Ihrer Anwendung mit Transloadit. Zu diesem Zweck können Sie Testframeworks wie Mokka oder Scherz verwenden. Sie können auch Mock -Dienste verwenden, um das Verhalten von Transloadit während des Tests zu simulieren. Ihre Baugruppen und Schutz Ihrer Transload -API -Schlüssel. Sie können die Funktion "Signaturauthentifizierung" von Transloadit verwenden, um sicherzustellen, dass nur autorisierte Clients Assemblies erstellen können. Sie sollten Ihre Transloadit-API-Schlüssel auch sicher speichern und sie niemals im clientseitigen Code freilegen. Der vielseitige Medienverarbeitungsdienst und er unterstützt neben der User -Avatar -Generation eine Vielzahl von Aufgaben. Sie können es für die Bild- und Videoverarbeitung, das Hochladen von Dateien und mehr verwenden. Sie können sogar mehrere Aufgaben in einer einzelnen Baugruppe zusammenstellen, um komplexe Workflows für Medienverarbeitung zu erstellen. Mit Transloadit beinhaltet das Hören nach Fortschrittsereignissen in Ihrer Montage. Transloadit gibt während des Montageprozesses in regelmäßigen Abständen „Fortschrittsereignisse“ in regelmäßigen Abständen ab. Sie können auf diese Ereignisse zuhören und die Benutzeroberfläche Ihrer Anwendung aktualisieren, um den aktuellen Fortschritt widerzuspiegeln.

Wie kann ich den Benutzer -Avatar -Erzeugungsprozess mit Transloadit skalieren? Sie können mehrere Baugruppen erstellen, um Avatare parallel zu verarbeiten, was Ihren Durchsatz erheblich erhöhen kann. Sie sollten auch Ihre Transload -Nutzung überwachen und Ihren Plan nach Bedarf anpassen, um sicherzustellen, dass Sie über genügend Kapazitäten verfügen, um die Last Ihrer Anwendung zu verarbeiten.

Das obige ist der detaillierte Inhalt vonErstellen einer Benutzer -Avatar -Komponente mit node.js & transloadit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!