400（錯誤的請求）錯誤 - 春季啓動文件上傳使用JQuery AJAX

Question

我想上傳一張圖片使用thymeleaf ajax和彈簧引導。我使用了大部分帖子，我在stackoverflow和其他論壇上發現，但我似乎工作。我已將CSRF添加到我的安全配置中，並將其包含在ajax上傳腳本中，但仍面臨「400（錯誤請求）」錯誤。

異常錯誤

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)"); 
      } 
     }); 
    }); 

Answer 1

你的錯誤的根本原因似乎是

嵌套的例外是org.springframework.web.multipart.MultipartException：無法解析多servlet請求

這使我相信，您的服務器端按預期工作，但客戶端不以預期的格式發送數據。

你能嘗試改變你的Ajax調用以下

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

然後在服務器端，上傳的文件對象將出現在file參數

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