2014-01-22 4 views
8

Ich versuche, Restangular für Datei-Upload-Post-Anfrage zu verwenden, möchte ich die gleiche Funktionalität wie unten in Restangular erreichen. Allerdings war ich mir nicht sicher, wie ich den Inhaltstyp und die transformRequest nur für diese bestimmte Anfrage festlegen konnte. Wenn ich es richtig verstehe, setzt setDefaultHeader es für alle nachfolgenden Anfragen. Gibt es einen anderen Weg?Einstellung Header und HTTP-Parameter für eine einzelne Anfrage in Restangular

myApp.service('$fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl){ 
     var filedata = new FormData(); 
     filedata.append('file', file); 
     $http.post(uploadUrl, filedata, { 
     transformRequest: angular.identity, 
     headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
     }) 
     .error(function(){ 
     }); 
    } 
}]); 

Antwort

6

Um die Header für eine einzelne Anforderung zu setzen alles, was Sie tun müssen, werden, ist ein Objekt fügen Sie den Namen und den Wert der Header als ein Argument enthält, .post(), .get() oder was auch immer Methode du brauchst.

https://github.com/mgonto/restangular#element-methods

Restangular.all('some-endpoint').post(postContent, {}, {'Content-Type': undefined}).then(function (response) { 
    console.log('Weeeeee!!!'); 
}); 

Was die transformRequest ich bin nicht sicher, ich habe nicht mit etwas beschäftigen, wie die zuvor, ist dies die einzige Sache, die ich auf mich in der Dokumentation finden konnte:

https://github.com/mgonto/restangular#setdefaulthttpfields

Aber das scheint es für alle die Anfrage, die nicht das ist, was Sie wollen, aber es ist zumindest etwas festgelegt.

Wie auch immer, hoffentlich hilft Ihnen das, was Sie wollen.

Edit:

Da die meisten der Anforderungstypen in restangular eine Abfrage param haben und dann die Header, die Sie in einer leeren Abfrage param Objekt übergeben müssen und dann die Header, Beispiel dies zeigen, wurde aktualisiert .

5

Da dies der erste Treffer bei Google für dieses Problem ist, siehe Issue 420 im Restangular Issue Tracker.

Grundsätzlich hat das neueste Restangular eine withHttpConfig Funktion, um $http Optionen direkt vor dem Senden einer Anfrage festzulegen.

Wenn Sie eine Route mit einer URL etwas wie example.com/api/users/:id/picture die mit einem Bild für einen bestimmten Benutzer einen mehrteiliger Upload akzeptiert man so etwas tun könnte:

Users.one(2) 
    .withHttpConfig({transformRequest: angular.identity}) 
    .customPOST(filedata, 'picture', undefined, {'Content-Type': undefined}) 
    .then(function(resp) { 
     // File data post is complete here 
    }); 

standardmäßig Angular alle Daten mit $http gesendet verwandeln zu JSON. Die transformRequest Konfiguration ersetzt diese Standardtransformation einfach durch eine NOP.

+1

Diese Antwort war das nützlichste, weil es eine wichtige Bit Information erklärt. Ohne transformRequest-Einstellung war mein Formular nicht korrekt multipart, obwohl der Inhaltstyp in Ordnung war, der Begrenzungsmarker fehlte. Siehe https://github.com/mgtto/restangular#how-can-i-send-files-in-my-request-using-restangular –

8

Sie haben hier 2 Situationen, schaffen die POST für ein neues Objekt oder die PUT ein Element zu bearbeiten:

// Save new Item 
$scope.saveNew = function (item) { 

    var data = new FormData(); 
    angular.forEach(item, function (fieldData, field) { 
    data.append(field, fieldData); 
    }); 

    Restangular 
    .all('items') 
    .withHttpConfig({transformRequest: angular.identity}) 
    .post(data, {}, {'Content-Type': undefined}) 
    .then(function() { 
     // do on success 
    }, function() { 
     // do on failure 
    }); 
}; 

// Edit existing Item 
$scope.save = function (item) { 

    var data = new FormData(); 
    angular.forEach(item.plain(), function (fieldData, field) { 
    data.append(field, fieldData); 
    }); 

    Restangular 
    .one('items', item._id) 
    .withHttpConfig({transformRequest: angular.identity}) 
    .customPUT(data, undefined, {}, {'Content-Type': undefined}) 
    .then(function() { 
     $location.path('sites'); 
    }); 
Verwandte Themen