Angular - Datei als Base64 hochladen

8

Ich versuche, Dateien von der Angular 4-Anwendung in einen JSON-API-Dienst hochzuladen, der base64-Zeichenfolgen als Dateiinhalt akzeptiert.

Also was ich tue - lies die Datei mit FileReader.readAsDataURL , dann, wenn der Benutzer den Upload bestätigt, erstelle ich eine JSON Anfrage an die API und sende die base64 Zeichenkette der Datei, die ich früher bekommen habe.

Hier fängt das Problem an - sobald ich etwas mit dem "Inhalt" mache (log es, sende es, w / e) wird die Anfrage gesendet, aber seine wahnsinnig langsam, z 20 Sekunden für 2 MB Datei.

Ich habe es versucht:

  • mit ArrayBuffer und manuelle Konvertierung in base64
  • Speichern der base64-Zeichenfolge in HTML und späteres Abrufen
  • Lesen der Dateien, nachdem der Benutzer auf den Upload-Button geklickt hat
  • mit dem alten Client von @angular/common
  • mit einer einfachen XHR-Anfrage

aber alles führt zum gleichen Ergebnis.

Ich weiß, wo das Problem liegt. Aber warum passiert es ? Ist es etwas Browserspezifisches oder Angular spezifisch? Gibt es einen bevorzugten Ansatz (Denken Sie daran, es muss Base64 String sein)?

Anmerkungen:

  • Änderungen in der API sind außerhalb meiner Kontrolle
  • API ist in Ordnung, Senden einer Datei durch den Postboten wird sofort beendet

Code:

Diese Methode wird ausgeführt, wenn der Benutzer der Dropzone eine Datei hinzufügt:

%Vor%

Diese Methode wird ausgeführt, wenn Benutzer auf die Schaltfläche zum Speichern klicken

%Vor%     
realshadow 02.12.2017, 00:45
quelle

1 Antwort

3

Um große Dateien zum Server zu senden, sollten Sie FormData verwenden, um es als mehrteilige anstelle einer einzelnen großen Datei zu senden.

Etwas wie:

%Vor%

Vergessen Sie auch nicht, den Header 'Content-Type': undefined zu setzen, ich habe mich stundenlang über diesen Kopf gekratzt.

    
Yaser 06.12.2017 01:32
quelle