Question

我试图将文件从Angular控制器发布到后端。但是Spring REST控制器正在接收空值。

JS

myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http){
             $scope.uploadFile = function(){
                    var formData=new FormData();
                    formData.append("file", $scope.myFile); 
                    alert("Hi");
                    $http({
                        method: 'POST',
                        url: 'upload', 
                        headers: {'Content-Type': undefined}, 
                        data: formData,
                        transformRequest: function(data, headersGetterFunction) {
                            return data;
                        }
                    }).success(function(data, status) {  
                         console.log('file is ' );
                         console.dir(data);
                    })
                    .error(function(data, status) {
                    });
                }
         }]);

Spring-REST控制器

 @RequestMapping(value="/upload", method=RequestMethod.POST)
         public @ResponseBody String upload(@RequestBody MultipartFile file)  {
                        System.out.println(file);
}

我也试过使用public @ResponseBody void uploadFile（MultipartHttpServletRequest请求，HttpServletResponse响应），但它没用。我也在配置文件中声明了multipartResolver。有什么想法吗？我正在拼命寻找解决方案。

Answer 1

以下是一段适合我的代码：

Spring-REST控制器

@RequestMapping(value = "/api/users/{id}/image", method = RequestMethod.POST)
@ResponseBody
public boolean uploadUserImage( @PathVariable("id") Long id, @RequestParam("file") MultipartFile file ) {
    return userService.saveUserImage(id, file);
}

在前端你可以做这样的事情

角度控制器

//the image
$scope.uploadme;

$scope.uploadImage = function() {
  var fd = new FormData();
  var imgBlob = dataURItoBlob($scope.uploadme);
  fd.append('file', imgBlob);
  $http.post(
      '/upload',
      fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }
      }
    )
    .success(function(response) {
      console.log('success', response);
    })
    .error(function(response) {
      console.log('error', response);
    });
}


//you need this function to convert the dataURI
function dataURItoBlob(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var array = [];
  for (var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {
    type: mimeString
  });
}

假设http请求正确，问题必须在Spring控制器上。我认为您必须将upload(@RequestBody MultipartFile file)更改为upload(@RequestParam("file") MultipartFile file)。所以它会是这样的：

@RequestMapping(value="/upload", method=RequestMethod.POST)
@ResponseBody
public void upload(@RequestParam("file") MultipartFile file)  {
    System.out.println(file);
}

同样在你的函数中，你让它返回String，但你没有返回一个。所以我假设你正在做其他的事情，你删除了代码，以便发布问题并错过了返回，否则它甚至不会构建。

最后你可以check this answer我给出了类似的问题。

如何使Spring REST服务接受Angular Controller发送的多部分文件数据？

1 个答案: