Question

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

在用户个人资料编辑页面中，它包含使用ngImgCrop的图片裁剪。然后我将裁剪后的图像结果显示为 data：image / png; base64 。

但是当我在控制器中调用$ http补丁来更新服务器端的图片时，我总是得到 400 Bad Request “提交的数据不是文件。请检查表单上的编码类型“。我认为它来自数据：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。

带有数据的Angular $ http帖子：image / png; base64字段

2 个答案: