6

私はDjango RESTとAngular on frontendで簡単なアプリを持っており、画像のアップロードに問題があります。
私のモデル:Django REST、アップロードされた画像にnull値があります

class Photo(models.Model): 

    img = models.ImageField(upload_to='photos/', max_length=254) 
    text = models.CharField(max_length=254, blank=True) 

私は、フォームを介して画像を送信して、テキストがうまくアップロードされますが、画像はnull値を持ちます。ブラウザから
responce:

{ "IMG":NULL、 "テキスト": "テスト"}:

のQueryDict Iが画像をアップロードする際

ここ

self.data.request印刷されます。 {'text':['test']、 'InMemoryUploadedFile:filename.jpg(image/jpeg)]}

シリアライザはちょうどsimですple ModelSerializerに2つのモデルフィールドがあります。
ビュー:

class PhotoViewSet(viewsets.ModelViewSet): 

    queryset = Photo.objects.all() 
    serializer_class = PhotoSerializer 
    parser_classes = (MultiPartParser, FormParser) 

    def perform_create(self, serializer): 
     serializer.save(img=self.request.data.get('file')) 

photo_router = DefaultRouter() 
photo_router.register(r'photo', PhotoViewSet) 

私はng-file-upload libに使用した画像のアップロードのためには、私がアップロードする別の方法を試してみましたが、イメージがあまりにもヌルでした。
角度コード:

var app = angular.module('myApp', ['ngRoute', 'ngFileUpload']); 

app.config(function ($routeProvider) { 

    $routeProvider 
     .when('/', { 
      templateUrl: 'http://127.0.0.1:8000/static/js/angular/templates/home.html' 
    }) 
}); 
app.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
}]); 
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function($scope, Upload, $timeout) { 
    $scope.uploadPic = function(file) { 
    file.upload = Upload.upload({ 
     url: '/api/photo/', 
     data: {text: $scope.text, img: file}, 
    }); 

    file.upload.then(function (response) { 
     $timeout(function() { 
     file.result = response.data; 
     }); 
    }, function (response) { 
     if (response.status > 0) 
     $scope.errorMsg = response.status + ': ' + response.data; 
    }, function (evt) { 
     file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
    }); 
    } 
}]); 

答えて

1

あなたはこのJSON data: {text: $scope.text, img: file}を投稿していますが、self.request.data.get('file')を呼び出すperform_create方法でされています。あなたはこれを変更する必要があると思います

serializer.save(self.request.data.get('img')) 
+0

Greate、ありがとうございます! –

関連する問題