Angular $http post with data:image/png;base64 field

Question

我已经用Django Rest Framework作为后端构建了一个Angular应用程序。

在用户配置文件编辑页面中，它包含使用ngImgCrop裁剪的图片。然后我得到裁剪后的图像结果为数据：image/png；base64。

但当我在控制器中调用$http补丁来更新服务器端的图片时，我总是收到400错误请求"提交的数据不是文件。请检查表单上的编码类型。"。我认为它来自数据：image/png；base64.

这是我的角度代码。有人知道怎么解决这个问题吗？或者我做错了什么？

$http({
  method : 'PATCH',
  url : ,
  data : {
    profile_picture: $scope.croppedProfilePicture
  }
}).then(function () {
  ...
});

我也尝试为这个请求添加一些标题，但仍然没有成功。

headers : {'Content-Type': undefined }

Answer 1

这里有一个示例fileUploadService和一个称之为的控制器

services.service('fileUploadService', ['$http', function ($http) {
  this.uploadFileToUrl = function(file, uploadUrl, params){
    var fd = new FormData();
    fd.append('file', file);
    promise = $http.post(uploadUrl, fd, {
      transformRequest: angular.identity,
      headers: {'Content-Type': undefined},
      params: params
    });
    return promise;
  }
}]);

在您的控制器中，您可以像这样使用fileUploadService：

  $scope.sendToServer = function() {
    var uploadUrl = '/myUrl/';
    fileUploadService.uploadFileToUrl(
      $scope.croppedImage, uploadUrl, {}).then(function(resp) {
        // handle response
    })
  };

Answer 2

您还必须将图像转换为Base64才能将图像发布到Django Rest Framework。