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) {