Das Hochladen von Dateien mit mehrteiligen / Formulardaten ist unkompliziert und funktioniert die meiste Zeit gut, bis Sie sich auf das Hochladen großer Dateien konzentrieren. Wenn wir genau hinschauen, was passiert während eines Datei-Uploads:

  • Der Client sendet eine POST-Anfrage mit dem Dateiinhalt in BODY

  • Der Webserver akzeptiert die Anforderung und initiiert die Datenübertragung (oder gibt den Fehler 413 zurück, wenn die Dateigröße den Grenzwert überschreitet).

  • Der Webserver beginnt, Puffer zu füllen (abhängig von der Datei- und Puffergröße), speichert sie auf der Festplatte und sendet sie über Socket / Netzwerk an das Back-End

  • Das Back-End überprüft die Authentifizierung (schauen Sie nach, sobald die Datei hochgeladen wurde).

  • Das Back-End liest die Datei und schneidet einige Header aus. Content-Disposition, Content-Type, speichert sie erneut auf der Festplatte Das Back-End führt alles aus, was Sie mit der Datei tun müssen

Um einen solchen Overhead zu vermeiden, sichern wir die Datei auf der Festplatte (Nginx client_body_in_file_only) und verwalten den Rückruf, der später gesendet werden soll. Dann nimmt der Warteschlangenarbeiter die Datei auf und führt die erforderlichen Schritte aus. Es funktioniert für die Kommunikation zwischen Servern ziemlich geschickt, aber wir müssen ein ähnliches Problem mit dem clientseitigen Upload lösen.

Wir haben auch eine clientseitige S3-Upload-Lösung. Es findet keine Back-End-Interaktion statt. Für das Hochladen von Videos verwalten wir das Video so, dass es mit Zencoder in das Format h.264 Baseline / AAC konvertiert wird.

Derzeit verwenden wir einen modifizierten Flash-Uploader basierend auf s3-swf-upload-plugin mit Kombination von Zencoder JS SDK, das wirklich effizient ist, aber Flash verwendet.

Frage. Wie kann man mit dem HTML5-Datei-Uploader dasselbe Ziel erreichen? Hat Filepicker.io und Zencoder lösen das Problem? Was ist die empfohlene Methode zum Verwalten des Hochladens von HTML5-Dateien ohne Back-End-Interaktion?

Die Anforderungen sind folgende:

  • HTML5, nicht Flash
  • Hochladen von Videos mit Nachbearbeitung, um sie mit HTML5-Playern und Mobilgeräten kompatibel zu machen
  • Bilder mit Nachbearbeitung hochladen (Größe ändern, zuschneiden, drehen)
  • um Dokumente wie PDF mit einer Vorschaufunktion hochzuladen

Macht https://www.filepicker.com einen guten Job?

7
Anatoly 24 Aug. 2015 im 22:49

3 Antworten

Beste Antwort

Die Anforderungen sind folgende:

HTML5, nicht Flash

Filepicker unterstützt jetzt ein vollständig ansprechendes Widget, das aus reinem HTML und CSS besteht.

um Videos mit Nachbearbeitung hochzuladen, damit sie mit HTML5-Playern und Mobilgeräten kompatibel sind

Filepicker bietet jetzt die Möglichkeit, die meisten Videoformate für die mobile Wiedergabe in h264 & webm zu transkodieren. https://www.filepicker.com/documentation/file_processing/video_conversion/video

zum Hochladen von Bildern mit Nachbearbeitung (Größe ändern, zuschneiden, drehen)

Filepicker bietet Crop & Rotate im neuen Widget sowie Größenänderung, Schärfen und Wasserzeichen über die API.

um Dokumente wie PDF mit einer Vorschaufunktion hochzuladen

Wir bieten die Möglichkeit, von 19 verschiedenen Dateiformaten in zahlreiche Ausgabeformate zu konvertieren. https://www.filepicker.com/documentation/file_processing/document_conversion/document

1
Dylan Simpson 31 Aug. 2015 im 21:58

Ich benutze Filepicker seit 2 Jahren und ohne Zweifel ist es den Preis wert. Versuchen Sie nicht, das Hochladen von Dateien zu verwalten (von Google Drive, von iOS, von meiner Kamera, von Dropbox ...). Filepicker handhabt dies sehr gut und bietet Ihnen eine gebrauchsfertige URL. Verbringen Sie mehr Zeit mit der Arbeit an Ihrem Kerngeschäft. Das Hochladen von Dateien ist wirklich einfach zu delegieren

1
131 30 Aug. 2015 im 13:39

Um große Dateien in S3 hochzuladen, gibt es eine REST-API für das Hochladen mehrerer Teile, was folgendermaßen funktioniert

  1. einen Upload starten
  2. Laden Sie Dateiinhalte hoch, die in mehrere Anforderungen aufgeteilt sind
  3. Beenden Sie den Upload

Die API kann auch über Javascript aufgerufen werden. Die hochgeladene Datei kann mithilfe von Datei / Blob-Slice-API

Das einzige Problem ist, dass Sie Ihre Authentifizierungsdetails übergeben müssen, um sich von Javascript aus bei S3 authentifizieren zu können. Dies wird normalerweise von einem Interlayer wie PHP gelöst, sodass die Authentifizierungsdetails nicht in Javascript-Dateien gespeichert werden.

Ähnliche Frage zu SO: Mehrteilige HTML5- und Amazon S3-Uploads

BEARBEITEN

  • Bildvorgänge wie Zuschneiden und Ändern der Größe können über die Leinwand ausgeführt werden. Laden Sie einfach das lokale Bild in das Canvas-Element, nehmen Sie die erforderlichen Änderungen vor und generieren Sie dann mit canvas.toDataUrl -Methode.
  • Eine PDF-Vorschau ist möglich. Es gibt eine PDF.js lib, in die lokale PDF-Dateien gerendert werden können die Leinwand
  • AFAIK Es gibt keine Möglichkeit, auf Client-Seite eine Videokonvertierung durchzuführen
0
Community 23 Mai 2017 im 11:53