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
Antwort
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:
Es ist sehr hilfreich. Danke für Ihre Hilfe. –
die bei weitem einfachste Lösung die Interweb zur Verfügung gestellt, danke – FloydThreepwood
Wie fülle ich die "Datei" variabele? I mena, wie man es an die Eingabesteuerung bindet? – Nemus
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/
Verwenden [Formdata] (https://developer.mozilla.org/en-US/docs/Web/API/FormData) – aarosil
Also muss ich das FormData-Objekt erstellen und dann Daten darin einfügen und das FormData-Objekt an meine API senden? –
Genau, ich kann eine ausführlichere Antwort mit Beispielcode veröffentlichen, wenn Sie möchten. – aarosil