アップロードデータと、複数のファイルangularjsとし、Spring MVCの

Question

私は構造を持つHTMLフォームがあります。

<form class="form-horizontal" method="post" enctype="multipart/form-data"> 
    <div class="form-group"> 
     <div class="col-sm-10 top-element"> 
      <select class="form-control" ng-model="category" id="categorySelect" required> 
       <option selected value="1">Application & Services</option> 
       <option value="2">Benefits & Paper Work</option> 
       <option value="3">Hardware & Software</option> 
       <option value="4">People Management</option> 
       <option value="5">Security & Access</option> 
       <option value="6">Workplaces & Facilities</option> 
      </select> 
     </div> 
     <div class="col-sm-10 element"> 
      <input type="text" ng-model="name" class="form-control" id="ticketName" required> 
     </div> 
     <div class="col-sm-10 element"> 
      <textarea class="form-control" ng-model="description" id="ticketDescription" rows="3"></textarea> 
     </div> 
     <div class="col-sm-10 element"> 
      <select class="form-control" ng-model="urgency" id="ticketUrgency" name="urgency"> 
       <option selected value="Low">Low</option> 
       <option value="Medium">Medium</option> 
       <option value="High">High</option> 
       <option value="Critical">Critical</option> 
      </select> 
     </div> 
     <div class="col-sm-10 element"> 
      <input class="form-control" id="date" name="date" ng-model="date" placeholder="MM/DD/YYYY" type="text"/> 
     </div> 
     <div class="col-sm-10 element"> 
      <div class="form-inline"> 
       <input type="file" class="form-control" id="file" name="file" file-model="file" multiple 
         accept=".pdf,.jpeg,.jpg,.doc,.docx,.png"> 

       <input type="button" class="form-control" id="deleteFile" 
         onclick="document.getElementById('file').value = ''" value="Delete"> 
      </div> 
     </div> 
     <div th:text="${error}"></div> 
     <div class="col-sm-10 element"> 
      <textarea class="form-control" id="comment" ng-model="comment" rows="3"></textarea> 
     </div> 
    </div> 

    <div class="form-inline" style="float: right; margin-bottom: 60px; margin-right: 60px;"> 
     <input type="submit" ng-click="saveDraft()" name="draft" class="btn btn-primary ticket-list-btn draft-btn" 
       value="Save as Draft"> 
    </div> 

</form> 

をそして、私は http.post要求でサーバーにデータをアップロードします。あなたはファイルなしでこれを行う場合は、すべてが正常に動作します： 角度コントローラ：

 var data = { 
       name: $scope.name, 
       description: $scope.description, 
       desiredResolutionDate: $scope.desiredResolutionDate, 
       state: $scope.ticketState, 
       categoryId: $scope.category, 
       urgency: $scope.urgency, 
       comment: $scope.comment 
      } 
     ; 
     $http.post(url, data) 
      .then(
       function (response) { 
       }, 
       function (errResponse) { 
        console.log(errResponse); 
       } 
      ) 

と春コントローラ：私は私のTicketDtoオブジェクトフィールドMultipartFile[] files;に追加するなど、ポスト要求にファイルを送信しようとした

@RequestMapping(value = "/new", method = RequestMethod.POST) 
public void createTicket(@RequestBody TicketDto newTicketDto, Authentication authentication) { 
    User user = userService.loadUserByUsername(authentication.getName()); 
    newTicketDto.setOwnerId(user.getId()); 
    Ticket ticket = TicketDto.transformToEntity(newTicketDto); 
    ticketService.save(ticket); 
} 

他のフィールドは、それはdidn.t仕事。これどうやってするの？

Answer 1

//angular part code 
var file = $scope.file; 
var fd = new FormData(); 
fd.append('dto', JSON.stringify($scope.ticketdto)); 
fd.append('file', file); 

$http({ 
     method : 'POST', 
     url : 'url', 
     headers : { 
      'Content-Type' : undefined 
     }, 
     data : fd, 
     transformRequest : function(data, headersGetterFunction) { 
      return data; 
     } 
    }).success(function(response, status, header, config) { 
     ...... 
    }).error(function(response, status, header, config) {   
     ...... 
    }); 


    //java part 

    @RequestMapping(value = "/new", method = RequestMethod.POST) 
    public void createTicket(@RequestParam String dto, 
     @RequestParam(required = false) MultipartFile file , Authentication authentication) { 
     .... 
      //convert string ticket to dto using jackson databind 
     ..... 
    } 



//filemodel 

yourappname.directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

     element.bind('change', function() { 
      scope.$apply(function() { 
       modelSetter(scope, element[0].files); 
      }); 
     }); 
    } 
    }; 
}]);