2017-03-01 19 views
2

thymeleaf ajaxとspring-bootを使用して画像をアップロードしようとしています。私はstackoverflowや他のフォーラムで見つけた投稿のほとんどを使用していますが、私はうまくいくようです。私は私のセキュリティ設定にCSRFを追加し、ajaxアップロードスクリプトにも含めましたが、 "400(Bad Request)"エラーに直面しています。400(Bad Request)Error - JQuery AJAXを使用したSpringブートファイルアップロード

例外エラー

017-03-01 23:50:06.893 ERROR 58753 --- [nio-8080-exec-3] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadException: Stream closed] with root cause 

java.io.IOException: Stream closed 
    at org.apache.catalina.connector.InputBuffer.read(InputBuffer.java:372) ~[tomcat-embed-core-8.0.30.jar:8.0.30] 
    at org.apache.catalina.connector.CoyoteInputStream.read(CoyoteInputStream.java:190) ~[tomcat-embed-core-8.0.30.jar:8.0.30] 
    at java.io.FilterInputStream.read(FilterInputStream.java:133) ~[na:1.8.0_65] 
    at org.apache.commons.fileupload.util.LimitedInputStream.read(LimitedInputStream.java:134) ~[commons-fileupload-1.3.2.jar:1.3.2] 
    at org.apache.commons.fileupload.MultipartStream$ItemInputStream.makeAvailable(MultipartStream.java:999) ~[commons-fileupload-1.3.2.jar:1.3.2] 
    at org.apache.commons.fileupload.MultipartStream$ItemInputStream.read(MultipartStream.java:903) ~[commons-fileupload-1.3.2.jar:1.3.2] 
    at java.io.InputStream.read(InputStream.java:101) ~[na:1.8.0_65] 
    at org.apache.commons.fileupload.util.Streams.copy(Streams.java:100) ~[commons-fileupload-1.3.2.jar:1.3.2] 
    at org.apache.commons.fileupload.util.Streams.copy(Streams.java:70) ~[commons-fileupload-1.3.2.jar:1.3.2] 
    at org.apache.commons.fileupload.MultipartStream.readBodyData(MultipartStream.java:593) ~[commons-fileupload-1.3.2.jar:1.3.2] 

アップロード

<form id="upload-file-input" th:action="@{/uploadFile}" method="post" th:object="${picture}" enctype="multipart/form-data" class="form-inline inline new-item"> 
     <div th:replace="common/layout :: flash"></div> 
     <fieldset> 
      <legend> Upload Picture</legend> 
     <div class="row"> 
      <div class="col s12 l8"> 
       <div class="file-wrapper"> 
        <input type="file" id="file" name="uploadfile"/> 
        <span class="placeholder" data-placeholder="Choose an image...">Choose an image...</span> 
        <label for="file" class="button">Browse</label> 
        <span id="upload-file-message"></span> 
       </div> 
      </div> 
      <button type="submit" class="btn btn-primary">Upload</button> 
     </div> 
     </fieldset> 
     <div class="style16"></div> 
    </form> 

アップロードコントローラ

@RequestMapping(value = "/uploadFile", method = RequestMethod.POST) 
    @ResponseBody 
    public String uploadFile(@RequestParam("uploadfile") MultipartFile uploadfile) { 

     try { 
      // Get the filename and build the local file path 
      String filename = uploadfile.getOriginalFilename(); 
      String directory = "/Sites/admissionsPortal/data"; 
      String filepath = Paths.get(directory, filename).toString(); 

      // Save the file locally 
      BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File(filepath))); 
      stream.write(uploadfile.getBytes()); 
      stream.close(); 
     } 
     catch (Exception e) { 
      System.out.println(e.getMessage()); 
     } 

     return "redirect:/cert_prog"; 
    } // method uploadFile 

Upload.js

var token = $("meta[name='_csrf']").attr("content"); 
$.ajaxSetup({ 
    beforeSend: function(xhr) { 
     xhr.setRequestHeader('X-CSRF-TOKEN', token); 
    } 
}); 

var $form = $("#upload-file-input"); 
    $form.on("submit", function(e){ 
    e.preventDefault(); 
    $.ajax({ 
      url: $form.prop('action'), 
      type: "POST", 
      data: new FormData($("#upload-file-input")[0]), 
      enctype: 'multipart/form-data', 
      processData: false, 
      contentType: false, 
      cache: false, 
      success: function() { 
      // Handle upload success 
      $("#upload-file-message").text("File succesfully uploaded"); 
      }, 
      error: function() { 
      // Handle upload error 
      $("#upload-file-message").text("File not uploaded (perhaps it's too much big)"); 
      } 
     }); 
    }); 
+0

で存在するであろう次

// create a new form var formData = new FormData(); // add your binary value to the file key formData.append("file", fileBinary); $.ajax({dataType : 'json', ... data : formData, // add the form ... 

にあなたのAJAX呼び出しを変更してみてくださいでしたあなたは今までのヒットでください例外? –

+0

@MattClarkはい私do –

+0

@MattClarkがIOExceptionを投げた –

答えて

1

あなたのエラーの根本的な原因があると思われる

ネストされた例外はorg.springframework.web.multipart.MultipartExceptionです:は解析できませんでしたマルチパートサーブレット要求

と信じて私をリードサーバー側は意図したとおりに動作していますが、クライアントは予期した形式でデータを送信していません。

あなたはその後、サーバー側では、アップロードされたファイルオブジェクトがfileパラメータ

public String uploadFile(@RequestParam("file") MultipartFile uploadfile) { 
+0

私は値をformData.append( "file"、$( 'input [type = "file"]')[0])に追加します。エラーが発生しましたrg.springframework.web.multipart.MultipartException:現在のリクエストはマルチパートリクエストではありません - –

関連する問題