Получение 400 плохих запросов при отправке данных в Rest API с помощью Angularjs

Question

Я новичок в AngularJS и Django Rest API. В моем проекте я пытаюсь загрузить изображение и его название, для чего я написал следующий код. Я получаю сообщение об ошибке:

Object {data: Object, status: 400, config: Object, statusText: "Bad Request"} 

контроллер:

scope.ImageData = []; 
    this.saveImages = function(value){ 
     $scope.images.forEach(function(image){ 
     angular.forEach(captions, function(value, key){ 
       if(key == $scope.images.indexOf(image)){ 
        if($scope.ImageData.length <= key){ 
         $scope.ImageData[key]={ 
           'image' : image, 
           'caption' : value, 
           'key' : key 
        }; 
        albumFactory.createImage(slug,$scope.albumData.id,image,value) 
        .then(function(promise){ 
         $scope.uploadImage = promise.data; 
        }) 
       }   
       } 
      }) 
     }); 
    } 

услуги:

createImage: function(slug,album_id,image,title){ 
     var fo = new FormData(); 
     fo.append(image, title); 
     return $http.post(api + '/class/' + slug + '/albums/' + album_id + '/photos/' , 
     formData, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }); 
    } 
    } 
} 
]) 

вид:

class ImageList(ImageMixin, generics.ListCreateAPIView): 
    serializer_class = ImageSerializer 
    permission_classes = (ClassPermission,) 

    def perform_create(self, serializer): 
     album = get_object_or_404(Album, 
           class__slug=self.kwargs.get('slug'), 
           pk=self.kwargs.get('album__pk')) 
     serializer.save(album=album) 

URL:

url(r'^class/(?P<slug>[-\w]+)/albums/(?P<album__pk>\d+)/photos/?$', views.ImageList.as_view()) 

сериализатору:

class ImageSerializer(serializers.ModelSerializer): 
    class Meta: 
    model = Photo 
    fields = ('image', 'title',) 

Answer 1

Я бы рекомендовал вам это для загрузки изображений с помощью AJAX:

https://github.com/danialfarid/ng-file-upload

Я использовал его, и это очень хорошая библиотека для AngularJs.

To upload images via DRF you should install Pillow, and in serializer declare:

image = serializers.ImageField(use_url=True, allow_empty_file=True) 

Answer 2

Для добавления изображения я столкнулся некоторые проблемы. Я надеюсь, это поможет вам.

Кажется, что вы отправляете данные изображения, а сервер отказывается от этого формата данных. Изображение должно быть в basbe64.

Пожалуйста, проверьте эту ссылку (stackoverflow.com/questions/28036404/django-rest-framework-upload-image-the-submitted-data-was-not-a-file), если это полезно.