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的非常好的库。

要通过DRF上传图像，您应该安装Pillow，并在序列化程序中声明：

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）。

使用Angularjs将数据发送到Rest API时获得400个错误请求

2 个答案: