2015-06-03 96 views
2

我想使用角度js和彈簧引導來上傳文件。415(不支持的媒體類型)上傳文件時

這裏是我的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,我有錯誤提到如下。任何想法?

+1

使用你真的不能上傳文件AJAX。看看https://github.com/danialfarid/ng-file-upload –

+0

也許在'@ RequestMapping'中加入'consumes = {「multipart/form-data」}'會有幫助;如果不是,也嘗試省略客戶端的「Content-Type」:undefined'頭。我不知道這個,只是一個想法.... –

+0

不,它沒有幫助:( –

回答

0
$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?

+0

Thnak你我會嘗試一些解決方案,我會告訴你如果有幫助! –

相關問題