如何使用 Ajax 发送多部分文件请求 [重复]

Question

我可以看到很多关于这个问题的变体被问到，但是在尝试了这里的许多建议之后，我仍然无法让它完全发挥作用。基本上，我有一个 HTML 表单，在提交时会向服务器发出 POST 多部分文件请求：

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

当值改变时（选择一个文件），我让表单自动提交：

$('#selectyamlfile').change(function() {
      $('#resourcefilecheckoutform').submit();
    });

到服务器上的 REST 接口：

@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（删除操作）：

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

并将动作本身移动到提交表单时发生的jquery：

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

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

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 - Bad Request 错误，没有其他实际反馈表明它不喜欢什么。我觉得我在绕着一些我没有看到的基本错误跳舞，也许我抓取数据本身是错误的？有谁知道如何做到这一点？

Answer 1

关键部分是这个……

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