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 - 错误请求错误而没有其他真实反馈来指示它不喜欢的内容。我觉得我正在围绕一些我根本没有看到的根本错误跳舞，也许我抓错了数据本身？有谁知道如何实现这个目标？

Answer 1

关键部分是......

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

如何使用Ajax

1 个答案: