415（不支持的媒体类型）上传文件时

Question

我想使用角度js和弹簧引导来上传文件。

这里是我的Java控制器

//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--> 

这里是我的js控制

//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 .'); 
      }); 
     } 

当我填写表格，我点击的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

所以，如果你需要支持“传统”的浏览器，请使用为此编写的第三方ng的polyfill库（如@Uzi Kilon建议）。

如果你是罚款现代浏览器，你可以添加自定义输入[文件] onChange处理绑定文件建模和正确发送到服务器端点。（见AngularJS: how to implement a simple file upload with multipart form?）