2014-11-08 7 views
5

Ich versuche, eckige CRUD-App, die ein bisschen wie "Dropbox" ist. Also, es muss Datei-und Ordner-Hosting mit Sharing-und Zugriffsfunktionen haben. Ich stehe auf eine Frage, wie man Bild- und Videodateien hochladen kann? Ich benutzte Datei-API (FileReader, Blob), um eine Vorschau der Dateien auf der Client-Seite zu machen, aber ich habe keine Ahnung, wie man diese Art von Daten an den Server sendet.Datei auf RESTful-Dienst in angularjs hochladen

+0

Verwenden [Formdata] (https://developer.mozilla.org/en-US/docs/Web/API/FormData) – aarosil

+0

Also muss ich das FormData-Objekt erstellen und dann Daten darin einfügen und das FormData-Objekt an meine API senden? –

+0

Genau, ich kann eine ausführlichere Antwort mit Beispielcode veröffentlichen, wenn Sie möchten. – aarosil

Antwort

6

So etwas sollte funktionieren gut als multipart/form-data Anfrage an den Backend-API senden:

var file = ... // get from file input; 
var backendUrl = ... 
var fd = new FormData(); 

fd.append('myFile', file, 'filename.ext'); 

$http.post(backendUrl, fd, { 
    // this cancels AngularJS normal serialization of request 
    transformRequest: angular.identity, 
    // this lets browser set `Content-Type: multipart/form-data` 
    // header and proper data boundary 
    headers: {'Content-Type': undefined} 
}) 

.success(function(){ 
    //file was uploaded 
}) 

.error(function(){ 
    //something went wrong 
}); 

hier Siehe Referenz:

FormData API Doc

Using FormData Objects (MDN)

multipart-formdata file upload with AngularJS

+0

Es ist sehr hilfreich. Danke für Ihre Hilfe. –

+0

die bei weitem einfachste Lösung die Interweb zur Verfügung gestellt, danke – FloydThreepwood

+1

Wie fülle ich die "Datei" variabele? I mena, wie man es an die Eingabesteuerung bindet? – Nemus

0

Sie können Dateien mit den Anweisungen ngFileUpload oder angularFileUpload hochladen.

Bei angularFileUpload verwenden Sie .upload in der Steuerung und im Falle von ngFileUpload Sie

auch verwenden .http, können Sie auch application/x-www-form-urlencoded Inhaltstyp statt verwenden können multipart, sofern Ihre Datei nicht riesig ist. Im Falle der Anwendung/x-www-form-urlencoded können Sie den Wert im Rest-Webservice einfach als normalen InputStream erhalten, so dass keine mehrteiligen Daten übertragen werden müssen.

Sie können die unten für die möglichen Wege finden Datei mit Winkel js und Rest Webdienst hochladen:

http://technoguider.com/2015/08/file-upload-using-angular-js-and-rest-web-service/