Javascript 如何使用Ajax发送多部分文件请求

我可以看到关于这个问题的各种各样的问题被问到了很多，但是在尝试了这里的许多建议之后，我仍然不能让这个问题很有效。基本上，我有一个HTML表单，在提交时向服务器发出POST multipartfile请求：

<form class="resource-checkout-form" method="POST" enctype="multipart/form-data" 
        id="resourcefilecheckoutform" action="/uploadAndCheckout">
    <input type="file" name="file" id="selectyamlfile" class="filestyle"/>
</form>

@ApiResponses(value = { 
        @ApiResponse(code = 200, message = "Success", response = HttpMessageInformationReturnDataBean.class),
        @ApiResponse(code = 404, message = "Not Found")}) 
@RequestMapping(value = "/uploadAndCheckout", method = RequestMethod.POST)
public String singleFileUpload(@RequestParam("file") MultipartFile file,
                               RedirectAttributes redirectAttributes) {

到服务器上的REST接口：

<form class="resource-checkout-form" method="POST" enctype="multipart/form-data" 
        id="resourcefilecheckoutform" action="/uploadAndCheckout">
    <input type="file" name="file" id="selectyamlfile" class="filestyle"/>
</form>

@ApiResponses(value = { 
        @ApiResponse(code = 200, message = "Success", response = HttpMessageInformationReturnDataBean.class),
        @ApiResponse(code = 404, message = "Not Found")}) 
@RequestMapping(value = "/uploadAndCheckout", method = RequestMethod.POST)
public String singleFileUpload(@RequestParam("file") MultipartFile file,
                               RedirectAttributes redirectAttributes) {

到目前为止，一切正常，它可以上传选定的文件。当我尝试通过使用Ajax本身执行请求来绕过表单提交重定向时，问题就出现了。我更改了HTML（删除操作）：

它发出请求，但在服务器端，它抱怨请求不是多部分请求：

org.springframework.web.multipart.MultipartException: The current request is not a multipart request

我发现的第一个建议是将contentType更改为false，但我已经这样做了，但没有成功。因此，在四处搜索之后，我尝试了一些方法，首先将contentType更改为multipart：

$('#resourcefilecheckoutform').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/uploadAndCheckout',
        type:'POST',
        contentType: 'multipart/form-data',
        cache: false,
        processData: false,
        data:$('#resourcefilecheckoutform').serialize(),
        success:function(){
            console.log("success");
        }
    });
}); 

但这导致了一个关于缺少边界的错误：

Caused by: java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

所以我想我应该添加边界，正如在其他一些线程中建议的那样：

$('#resourcefilecheckoutform').submit(function(e){
    e.preventDefault();
    var boundary = '--'+Math.random().toString().substr(2);
    $.ajax({
        url:'/uploadAndCheckout',
        type:'POST',
        contentType: 'multipart/form-data; boundary='+boundary,
        cache: false,
        processData: false,
        data: $('#resourcefilecheckoutform').serialize(),
        success:function(){
            console.log("success");
        }
    });
}); 

---

但是这会导致一个400错误的请求错误，没有其他真正的反馈来表明它不喜欢什么。我觉得我好像在绕着一些根本性的错误跳舞，我只是没有看到，也许我抓取的数据本身是错误的？有人知道如何做到这一点吗？

关键是

data: new FormData($('#resourcefilecheckoutform')[0]),

---

关键是这个

data: new FormData($('#resourcefilecheckoutform')[0]),

---

@zero298我也认为同样的@zero298我也认为同样的完美-我有一种感觉，我对这件事想得太多了，我可能抓错了数据。非常感谢！完美-我有一种感觉，我想得太多了，我可能抓错了数据。非常感谢！