サポートされていないメディアタイプ415 spring mvc restcontrollerとangularjsを使用したファイルアップロード

Question

ファイルアップロードの詳細が含まれているangularjs $ http.postをヒットしようとすると、サポートされていないメディアタイプが返されます。私はバックエンドのスプリングMCUレストコントローラを使用しています。コードスニペットは次のとおりです。

<ul><li><h4>Document Type</h4> 
 
    <select name="docType" ng-model="docType" name="docType"> 
 
    <option value="Report1">Report1</option> 
 
    <option value="Report2">Report2</option> 
 
    </select> 
 
    <input type="file" ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)" /> 
 
    </li> 
 
    <li><h4>Comments:</h4><textarea></textarea></li> 
 
    <li><button class="btn-panel-blue" type="submit">Saves</button></li> 
 
    <li><a href="#/searchProjects">Cancel</a></li> 
 
    </ul>

angular.module('app') 
 
.controller('prjCntrl', function ($scope,projectService, sharedService, $location, $log, $http, $state) { 
 
\t $scope.setFiles = function(element) { 
 
\t  $scope.$apply(function(scope) { 
 
\t   $scope.uploadedFile ; 
 
\t   for (var i = 0; i < element.files.length; i++) { 
 
\t   \t $scope.uploadedFile=element.files[i]; 
 
\t   \t break; 
 
\t   } 
 
\t  }); 
 
\t  }; 
 
$scope.updateProject = function updateProject() 
 
{ 
 
\t var formData=new FormData(); 
 
\t formData.append('docType',angular.toJson($scope.projectData.docType,true)); 
 
\t formData.append("uploadFile",$scope.uploadedFile); 
 
\t var url=baseURL + '/updateProject.do'; 
 
\t $http.post(url, formData, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) 
 
     .success(function(){alert("success");}) 
 
     .error(function(){ }); 
 
}; 
 
} 
 
);

とここに私のJavaコードです。ここ

    @RestController 
    @MultipartConfig(fileSizeThreshold=1024*1024*10, 
    maxFileSize=1024*1024*50,   
    maxRequestSize=1024*1024*100) 
    public class ProjectController { 
    @RequestMapping(value="/updateProject.do",method = RequestMethod.POST,headers ="Accept=multipart/form-data", consumes={"multipart/form-data"}, produces={"text/plain;charset=UTF-8"}) 
     public @ResponseBody String updateProjectDetails(HttpServletRequest request, HttpServletResponse response, @RequestBody ProjectForm command) 
     { 
      contractProjectsService.saveProject(command); 
      return "success"; 
     } 
    } 

は、クロム、ヘッダー/リクエストとレスポンスのデータからヘッダ情報は、ソリューションで私を助けてください

    **General:** 
    Request URL:http://localhost:9090/SpringMVCAngularJS/updateProject.do 
    Request Method:POST 
    Status Code:415 Unsupported Media Type 
    Remote Address:[::1]:9090 
    ***Response Headers:*** 
    view source 
    Content-Language:en 
    Content-Length:1048 
    Content-Type:text/html;charset=utf-8 
    Date:Wed, 03 Aug 2016 15:06:05 GMT 
    Server:Apache-Coyote/1.1 
    ***Request Headers:*** 
    view source 
    Accept:application/json, text/plain, */* 
    Accept-Encoding:gzip, deflate 
    Accept-Language:en-US,en;q=0.8 
    Authorization:Basic YmVlcDpib29w 
    Connection:keep-alive 
    Content-Length:1011 
    Content-Type:multipart/form-data; boundary=---- WebKitFormBoundaryagdf0LOX4AuXY6SI 
    Cookie:JSESSIONID=96052E348C6E52F53A594A179E65DE6D 
    Host:localhost:9090 
    Origin:http://localhost:9090 
    Referer:http://localhost:9090/SpringMVCAngularJS/index.html 
    User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 

です。

Answer 1

リクエストヘッダーにコメントやその他のデータを送信し、contollerにファイルを送信しようとすると、コントローラーで "@Requestpart"を使用してファイルを受け取ります。参考のために以下のコードを使用してください。

@Produces("text/plain;charset=UTF-8") 
    @RequestMapping(value = "/fileUpload/", method = RequestMethod.POST) 
    public @ResponseBody ResponseCodeModel fileUpload(@RequestPart MultipartFile file, 
      @RequestHeader(value = "comment") String comment, 
      )