415 (Неподдерживаемый тип носителя) при загрузке файлов

Question

Я хочу загрузить файлы с помощью углового js и весеннего ботинка.

Вот мой ява контроллер

//upload Files 

    @RequestMapping(value="/upload",headers=("content-type=multipart/*"), method=RequestMethod.POST) 
    public @ResponseBody String handleFileUpload(@RequestParam("name") String name,@RequestParam("file") MultipartFile file){ 
     if (!file.isEmpty()) { 
      try { 
       byte[] bytes = file.getBytes(); 
       BufferedOutputStream stream = 
         new BufferedOutputStream(new FileOutputStream(new File(name))); 
       stream.write(bytes); 
       stream.close(); 
       return "You successfully uploaded " + name + "!"; 
      } catch (Exception e) { 
       return "You failed to upload " + name + " => " + e.getMessage(); 
      } 
     } else { 
      return "You failed to upload " + name + " because the file was empty."; 
     } 
    } 

Вот моя форма

<section id="contact-info"> 


    <section id="contact-page"> 
     <div class="container"> 
      <div class="center">   

       <p class="lead">Import reports</p> 
      </div> 
      <div class="row contact-wrap"> 
       <div class="status alert alert-success" style="display: none"></div> 
       <form id="main-contact-form" class="contact-form" name="contact-form" method="POST" enctype="multipart/form-data" > 
        <div class="col-sm-5 col-sm-offset-1"> 
         <div class="form-group"> 
          <label>name *</label> 
          <input type="text" name="name" class="form-control" required="required" ng-model="rap.name"> 
         </div> 

      <div class="form-group"> 
          <label>file</label> 
          <input type="file" name="file" class="form-control" ng-model="rap.file"> 
         </div>       

         <div class="form-group"> 
          <button type="submit" class="btn btn-primary btn-lg" ng-click="upload()">Import File</button> 
         </div> 

        </form> 
      </div><!--/.row--> 
     </div><!--/.container--> 
    </section><!--/#contact-page--> 

Вот мой контроллер

//Upload files 
     $scope.upload=function(rap){ 
      $http.post('http://localhost:8080/upload?name='+$scope.rap.name+"file="+$scope.rap.file ,{ 
        headers: { 'Content-Type': undefined }, 
         transformRequest: angular.identity }) 

      .success(function(){ 

       console.log('Post Succeded !'); 
      }) 
      .error(function(){ 
       console.log('Post Failed .'); 
      }); 
     } 

JS Когда я заполнить форму и я нажимаю на ImportFile, я есть ошибка, упомянутая ниже. Все идеи?

Answer 1

$http.post('http://localhost:8080/uploadname='+$scope.rap.name+"file="+$scope.rap.file ,{ 
       headers: { 'Content-Type': undefined }, 
        transformRequest: angular.identity }) 

Вы сигнатура для этого метода является немного неправильно - второй объект данных, см https://docs.angularjs.org/api/ng/service/ $ HTTP # опубликовать

"file="+$scope.rap.file 

Вы выкладываете содержимое файла с помощью URL в качестве составного объекта ? Обычно файлы размещаются в теле http.

Кроме того, ngModel не поддерживает привязку к стоимости входного файла [], не все браузеры поддерживают FileAPI в JavaScript - пожалуйста, смотрите, например, это https://github.com/angular/angular.js/issues/1375

Так что, если вам нужно поддерживать «устаревшие» браузеры, используйте для этой цели библиотеки полифония сторонних разработчиков (например, @Uzi Kilon).

, если вы хорошо с современными браузерами, вы можете добавить пользовательский ввод [файл] OnChange обработчик для привязки файла к модели и правильно размещать на сервере конечной точки (см. AngularJS: how to implement a simple file upload with multipart form?)