AngularJS: Hochladen von Dateien mit $ resource (solution)

Habe ich gesucht weit und breit, während ich verpasst haben könnte, konnte ich nicht finden, eine Lösung für dieses problem: hochladen von Dateien mit einem $Ressource-Aktion.

Lassen Sie uns dieses Beispiel: unsere Rest-service ermöglicht uns den Zugriff auf die Bilder, indem Sie Anfragen an die /images/ Endpunkt. Jeder Image hat einen Titel, eine Beschreibung und der Pfad zeigt auf die Bild-Datei. Mithilfe der RESTful-Dienst, wir können alle von Ihnen (GET /images/), ein einziger (GET /images/1) oder hinzufügen (POST /images). Angular ermöglicht es uns, verwenden Sie $resource service zum ausführen dieser Aufgabe leicht, aber nicht für den Datei-Upload - dies ist die Voraussetzung für die Dritte Aktion - out of the box (und scheinen Sie nicht zu sein Planung auf die Unterstützung es jederzeit schnell). Wie, dann würden wir gehen über die Verwendung des sehr handlichen $resource service, wenn Sie können nicht mit file-uploads? Es stellt sich heraus, es ist ganz einfach!

Werden wir verwenden Sie Datenbindung verwenden, weil es eines der großartigen features von AngularJS. Wir haben die folgenden HTML-Formular:

<form class="form" name="form" novalidate ng-submit="submit()">
    <div class="form-group">
        <input class="form-control" ng-model="newImage.title" placeholder="Title" required>
    </div>
    <div class="form-group">
        <input class="form-control" ng-model="newImage.description" placeholder="Description">
    </div>
    <div class="form-group">
        <input type="file" files-model="newImage.image" required >
    </div>

    <div class="form-group clearfix">
        <button class="btn btn-success pull-right" type="submit" ng-disabled="form.$invalid">Save</button>
    </div>
</form>

Wie Sie sehen können, gibt es zwei text - input Felder der gebundenen jeweils um eine Eigenschaft eines einzelnen Objektes, die ich genannt habe newImage. Die Datei input ist gebunden sowie an eine Eigenschaft des newImage Objekt, aber dieses mal habe ich eine benutzerdefinierte Richtlinie gerade von hier. Diese Richtlinie macht es so, dass jedes mal, wenn der Inhalt der Datei input verpasst, ein FileList-Objekt wird innerhalb der gebundenen Eigenschaft anstelle eines fakepath (das wäre Eckigen standard-Verhalten).

Controller-code ist der folgende:

angular.module('clientApp')
.controller('MainCtrl', function ($scope, $resource) {
    var Image = $resource('http://localhost:3000/images/:id', {id: "@_id"});

    Image.get(function(result) {
        if (result.status != 'OK')
            throw result.status;

        $scope.images = result.data;
    })

    $scope.newImage = {};

    $scope.submit = function() {
        Image.save($scope.newImage, function(result) {
            if (result.status != 'OK')
                throw result.status;

            $scope.images.push(result.data);
        });
    }
}); 

(In diesem Fall ich bin mit einem NodeJS-server auf meinem lokalen Rechner auf port 3000, und die Antwort ist ein json-Objekt mit einer status Bereich und eine optionale data Feld).

Damit der Datei-upload zu arbeiten, wir müssen Sie nur richtig konfigurieren, den $http-service, zum Beispiel innerhalb der .config rufen Sie auf der app-Objekt. Konkret brauchen wir für die Transformation der Daten der einzelnen post-request an ein FormData-Objekt so, dass es an den server geschickt in das richtige format:

angular.module('clientApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($httpProvider) {
  $httpProvider.defaults.transformRequest = function(data) {
    if (data === undefined)
      return data;

    var fd = new FormData();
    angular.forEach(data, function(value, key) {
      if (value instanceof FileList) {
        if (value.length == 1) {
          fd.append(key, value[0]);
        } else {
          angular.forEach(value, function(file, index) {
            fd.append(key + '_' + index, file);
          });
        }
      } else {
        fd.append(key, value);
      }
    });

    return fd;
  }

  $httpProvider.defaults.headers.post['Content-Type'] = undefined;
});

Den Content-Type - header gesetzt ist, um undefined da es manuell zu multipart/form-data würde nicht die Grenze Wert, und der server würde nicht in der Lage sein, um eine Analyse der request korrekt.

Das ist es. Jetzt können Sie $resource zu save() Objekte, die sowohl die standard-Daten-Felder und-Dateien.

WARNUNG Das hat einige Einschränkungen:

1. Es funktioniert nicht auf älteren Browsern. Sorry 🙁

2. Wenn Ihr Modell "embedded" - Dokumente, wie

   {
title: "A title",
attributes: {
fancy: true,
colored: false,
nsfw: true
},
image: null
}

   dann müssen Sie umgestalten, die transformRequest Funktion entsprechend. Könnte man zum Beispiel JSON.stringify verschachtelte Objekte, vorausgesetzt, Sie können analysieren Sie am anderen Ende

3. Englisch ist nicht meine Hauptsprache, also, wenn meine Erklärung ist unklar Sag es mir und ich werde versuchen, das zu formulieren.:)

4. Dies ist nur ein Beispiel. Sie können erweitern diese je nachdem, was Ihre Anwendung tun muss.

Ich hoffe das hilft, cheers!

EDIT:

Wie bereits von @davideine weniger invasive Lösung wäre die Definition dieses Verhalten nur für diejenigen, die $resources, die es wirklich benötigen, und nicht zu verwandeln und jeden Wunsch von AngularJS. Sie können das tun, indem Sie Ihre $resource wie diese:

$resource('http://localhost:3000/images/:id', {id: "@_id"}, { 
    save: { 
        method: 'POST', 
        transformRequest: '<THE TRANSFORMATION METHOD DEFINED ABOVE>', 
        headers: '<SEE BELOW>' 
    } 
});

Als für den Kopf, sollten Sie eine, die Ihren Anforderungen genügt. Das einzige, was Sie angeben müssen ist die 'Content-Type' Eigenschaft mit der Einstellung undefined.

InformationsquelleAutor der Antwort juandemarco

Bitte beachten Sie, dass diese Methode funktioniert nicht auf 1.4.0+. Für mehr
Informationen Lesen AngularJS changelog (Suche nach $http: due to 5da1256) und dieses Problem. Dies war tatsächlich eine unbeabsichtigte (und daher entfernt) Verhalten auf AngularJS.

Ich kam mit dieser Funktionalität zu konvertieren (oder Anhängen) Formular-Daten in ein FormData-Objekt. Es könnte wahrscheinlich sein verwendet als Dienst.

Die Logik unten drinnen sein sollte entweder ein transformRequest oder in $httpProvider Konfiguration, oder kann verwendet werden als ein service. In irgendeiner Weise Content-Type header muss auf NULL gesetzt werden, und dies unterscheidet sich je nach Kontext Sie diese Logik. Zum Beispiel in einem transformRequest option bei der Konfiguration einer Ressource zu tun:

var headers = headersGetter();
headers['Content-Type'] = undefined;

oder wenn Sie die Konfiguration $httpProvider werden, könnte die Methode bereits in der Antwort oben.

In dem Beispiel unten, die Logik, die sich innerhalb einer transformRequest - Methode für eine Ressource.

appServices.factory('SomeResource', ['$resource', function($resource) {
  return $resource('some_resource/:id', null, {
    'save': {
      method: 'POST',
      transformRequest: function(data, headersGetter) {
        //Here we set the Content-Type header to null.
        var headers = headersGetter();
        headers['Content-Type'] = undefined;

        //And here begins the logic which could be used somewhere else
        //as noted above.
        if (data == undefined) {
          return data;
        }

        var fd = new FormData();

        var createKey = function(_keys_, currentKey) {
          var keys = angular.copy(_keys_);
          keys.push(currentKey);
          formKey = keys.shift()

          if (keys.length) {
            formKey += "[" + keys.join("][") + "]"
          }

          return formKey;
        }

        var addToFd = function(object, keys) {
          angular.forEach(object, function(value, key) {
            var formKey = createKey(keys, key);

            if (value instanceof File) {
              fd.append(formKey, value);
            } else if (value instanceof FileList) {
              if (value.length == 1) {
                fd.append(formKey, value[0]);
              } else {
                angular.forEach(value, function(file, index) {
                  fd.append(formKey + '[' + index + ']', file);
                });
              }
            } else if (value && (typeof value == 'object' || typeof value == 'array')) {
              var _keys = angular.copy(keys);
              _keys.push(key)
              addToFd(value, _keys);
            } else {
              fd.append(formKey, value);
            }
          });
        }

        addToFd(data, []);

        return fd;
      }
    }
  })
}]);

Also mit diesem, die Sie tun können, die folgende ohne Probleme:

var data = { 
  foo: "Bar",
  foobar: {
    baz: true
  },
  fooFile: someFile //instance of File or FileList
}

SomeResource.save(data);

InformationsquelleAutor der Antwort Parziphal