Hochladen von Bildern Richtlinie (AngularJS und django Rest Rahmen)

Question

ich ein Bild-Upload-Richtlinie benötigen, ist hier, wie mein Code wie folgt aussieht:

# Model 
class transporter(models.Model): 
    company_name = models.CharField(max_length=100) 
    address = models.CharField(max_length=100) 
    image = models.FileField(upload_to=upload_path,blank=True, null=True) 

    def upload_path(self, filename): 
     return 'photos/%s/%s' % (self.company_name, filename) 


# Serializer 
class transporterSerializer (serializers.HyperlinkedModelSerializer): 
    username = serializers.Field(source='username.username') 

    class Meta: 
     model = transporter 
     fields = ('id','company_name','address','image') 

es mit nur funktioniert Rest Rahmen django aber ich Bad Anfrage Fehler, wenn ich poste das Transportermodell mit angularjs. Ich muss das Bild hochladen und das Bildfeld mit der Bild-URL festlegen. danke

Answer 1

Ich werde meine Erfahrungen mit Dateiupload mit eckigen und drf teilen.

Schritt 1:
eine Datei Modell Anweisung können Sie, wenn Sie Ihre Datei-Eingabe zu einem Winkelmodell zu binden. Ich benutze die unten in mehreren Projekten, die den Trick für mich tut. Ich habe es von this blogpost von Jenny Louthan.

angular.module('appName').directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function(){ 
      scope.$apply(function(){ 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
}; 
}]); 

auf einer Datei-Eingabe benutzt:

<form enctype="multipart/form-data"> 
    ... 
    <input type="file" class="form-control" file-model="transporter.image"> 

Schritt 2:
erstellen Formdata-Objekt in Ihrem Controller oder Dienstleistung, die den Posten übernimmt. Dies kann getan werden, indem zuerst ein neues formData-Objekt initiiert wird. Dann durchlaufen Sie Ihr eckiges Objekt und setzen alle seine Attribute auf dieses formData-Objekt.

Wenn in der Steuerung erfolgt dies wie dies getan werden kann:
(I lodash für die _.each Schleife bin mit, sondern gehen mit dem, was zu Ihnen passt)

var fd = new FormData(); 
_.each($scope.transporter, function (val, key) { 
    fd.append(key, data[key]); 
}); 

Schritt 3:
Verwenden Sie Angulars $ http, um das formData-Objekt an Ihren URL-Endpunkt zu senden, und bearbeiten Sie die erfolgreiche Anfrage wie gewünscht!

$http({ 
    method: 'POST', 
    url: '/api/url/to/endpoint', 
    data: fd, 
    transformRequest: angular.identity, 
    headers: { 
     'Content-Type': undefined 
    } 
}).success(function (response) { 
    // Do stuff with you response 
});