Ich habe eine Meteor-App und bin daran interessiert, den Bild-Upload so einfach wie möglich zu gestalten.
Am einfachsten kann ich das Bild in eine Base64-Zeichenfolge auf dem Client konvertieren und als String in der Datenbank speichern.
Wie ist es möglich, ein Bild im Dateisystem des Benutzers in eine Base64-Zeichenkette umzuwandeln und dann in der Datenbank zu speichern?
Sie können eine HTML5-Dateieingabe verwenden:
HTML
%Vor% Hören Sie sich das Änderungsereignis an und verwenden Sie FileReader , um die lokale Datei als base64-Daten-URL zu lesen, die wir in einer reaktiven Variablen speichern werden:
Dann können wir den reactive var-Wert verwenden, um die Formularübermittlung zu erlauben / zu verbieten und den Wert an den Server zu senden:
%Vor% Sie müssen eine Servermethode definieren, die dataUrl auf einen Wert für eine Sammlungsdatei speichert. Was an dataUrl s cool ist, ist, dass Sie sie direkt als Image-Tag src verwenden können.
Beachten Sie, dass diese Lösung höchst unskalierbar ist, da die Bilddaten nicht zwischengespeichert werden können und die regelmäßige Kommunikation der App-Datenbank (die nur textähnliche Werte enthalten sollte) verschmutzen wird.
Sie können die base64-Daten von dataUrl abrufen und sie in Google Cloud Storage oder Amazon S3 hochladen und die Dateien hinter einem CDN bereitstellen.
Sie können auch Dienste verwenden, die all diese Dinge für Sie erledigen, wie zum Beispiel uploadcare oder filepicker.
BEARBEITEN:
Diese Lösung ist einfach zu implementieren, hat aber den Hauptnachteil, dass das Abrufen großer base64-Zeichenfolgen aus mongodb Ihre App davon abhalten kann, andere Daten abzurufen. Die DDP-Kommunikation ist im Moment immer live und nicht catchbar, sodass Ihre App Bilddaten immer neu lädt vom Server.
Sie würden dataUrl s nicht in Amazon speichern. Sie würden das Bild direkt speichern und es würde von Ihrer App mithilfe einer Amazon-URL mit einer HTTP-Anfrage abgerufen, die zwischengespeichert werden kann.
Sie haben beim Hochladen von Dateien zwei Möglichkeiten: Sie können sie direkt vom Client mithilfe spezifischer JavaScript-Browser-APIs hochladen oder Sie können sie in Node.js (NPM-Module) APIs auf dem Server hochladen.
Falls Sie vom Server hochladen möchten (was normalerweise einfacher ist, weil Sie nicht verlangen müssen, dass die Benutzer Ihrer Apps sich gegen Dienste von Drittanbietern authentifizieren, fungiert nur Ihr Server als vertrauenswürdiger Client, mit dem Sie kommunizieren können Amazon API), dann können Sie die Daten, die ein Benutzer hochladen möchte, über einen Methodenaufruf mit einem dataUrl als Argument senden.
Wenn Sie nicht in all diese Dinge tauchen wollen, denken Sie daran, uploadcare oder filepicker zu verwenden, aber denken Sie daran, dass diese kostenpflichtige Dienste sind (wie Amazon S3 BTW).
Nicht sicher, ob dies der beste Weg ist, aber Sie können dies leicht mit einem Datei-Reader tun. Im Template-Ereignishandler, in dem Sie den Dateiinhalt erhalten, können Sie die Datei an den Leser übergeben und eine Base64-Zeichenfolge zurückgeben. Zum Beispiel so etwas:
%Vor%Tags und Links image base64 meteor image-uploading