Java Spring引导上传文件并使用表单提交将其他数据作为ajax发送

Question

在我的应用程序中，我需要上传一个文件，同时我还需要发送一个参数。这是我的客户端代码。

$.ajax({
                url : "/uploadFile",
                type : "POST",

                data: {file_name:new FormData($("#upload-file-form")[0]),"groupName":"xxx"},
                enctype : 'multipart/form-data',
        //      processData : false,
                contentType : false,
                cache : false,

                success : function(data) {
                    if (data == "success") {
                        // alert ("file uploaded successfully")

                        $(".modal-body").html(
                                "<p>File uploaded Successfully</p>")
                        $('#myModal').modal('show');

                    }
                    if (data == "failure") {
                    alert("failure)
                    }
               }
        }

我的服务器端代码:

public String handleFileUpload(@RequestParam(value="file_name") MultipartFile file ,@RequestParam(value="groupName") String name){


    System.out.println("file");
    return "success";
}

但是它说当前请求不是多部分请求。org.springframework.web.multipart.MultipartException: 当前请求不是多部分请求

我应该如何解析文件名和其他参数？请帮忙

我的 html 表单。

<form id="upload-file-form">
  <label for="upload-file-input">Upload your CSV file:</label>
  <input id="upload-file-input" type="file" name="uploadfile" accept="*" class="align-right" />
  <br>

  <input type="submit"  id ="groupUpload" value="click here to upload the file" class="btn btn-info" >
</form>

Answer 1

请注意，您需要在 FormData 中附加值，这是唯一需要传递的内容。所以你可以附加需要像这样传递的额外值:

var fd = new FormData($("#upload-file-form")[0]);
    fd.append('groupName', 'xxx');

现在在 ajax 中你可以简单地传递这个:

data: fd,
processData : false,  // <----required to upload
contentType : false,  // <----required to upload

FormData().append() doc at MDN.

---

所以你的代码应该是这样的:

$("#upload-file-form").submit(function(e){
    e.preventDefault();  // <--------stops the form submission
    var fd = new FormData($("#upload-file-form")[0]);
        fd.append('groupName', 'xxx');

    $.ajax({
      url: "/uploadFile",
      type: "POST",
      data: fd,
      enctype: 'multipart/form-data',
      processData: false,
      contentType: false,
      cache: false,
      success: function(data) {
          if (data == "success") {
            $(".modal-body").html("<p>File uploaded Successfully</p>");
            $('#myModal').modal('show');
          } else if (data == "failure") {
            alert("failure)
          }
      }
    });
});

jQuery.ajax() to upload files example @ MDN