javascript - Ajax POST FormData 在 Spring MVC 中抛出异常

Question

昨天我遇到了类似的问题，Ajax POST 方法返回 405 错误，这是由 csrf token 引起的。有人帮助我解决了这个问题，但现在我对正在发生的事情无能为力。

我有一个 Ajax POST 请求:

$(document).ready(function(){
    var mic, recorder, soundFile;
    setup();
})


function setup() {
  mic = new p5.AudioIn();
  mic.start();
  recorder = new p5.SoundRecorder();
  recorder.setInput(mic);
  soundFile = new p5.SoundFile();
}

function toggleRecording(e) {
    if (e.classList.contains("recording")) {
        recorder.stop();    
        e.classList.remove("recording"); 
        sendAudioToServer(soundFile)
    } else {
        e.classList.add("recording");
        recorder.record(soundFile);
    }
}

function sendAudioToServer(soundFile)
{
    var data = new FormData();
    data.append('file', soundFile);
    $.ajax({
        method: 'POST',
        enctype: 'multipart/form-data',
        url: '/recognizeCommand',
        data: data,
        processData: false,
        contentType: false,
        success: function(data) {
          alert("works!");
        },    
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    })
}

soundFile 是 p5.js 库中包含音频的对象。我也尝试使用简单的字符串，但有同样的错误

以及 Spring MVC 中的 Controller :

@RequestMapping(value = "/recognizeCommand", method = RequestMethod.POST)
    public @ResponseBody String recognizeCommand(@RequestParam("file") MultipartFile multipartFile) {
        try {
            SpeechRecognitionApplication.logger.info("BEFORE: " + multipartFile);
            byte[] bytes = multipartFile.getBytes();
            SpeechRecognitionApplication.logger.info(bytes);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "finish";
    }

当我发送这个 Ajax 请求时它抛出错误 400 并且在 Spring 中有异常:

org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present
    at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(RequestParamMethodArgumentResolver.java:199) ~[spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:112) ~[spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:124) ~[spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:161) [spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:131) [spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:102) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:877) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:783) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:991) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:925) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:974) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
    at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:877) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]

重要的是，当我使用 postman 测试端点并发送一些文件作为参数时，它可以正常工作。

我知道这个论坛上有类似的帖子，但我认真地检查了每一个，尝试了每一个解决方案，但没有任何帮助。我相信你们中的一些人会知道如何解决这个问题。

编辑在 ajax post 方法之前添加这 3 行:

data.append('file', "example");
console.log("file: " + data.get("file"));
console.log(data);

返回:

Answer 1

我想问题不在于 spring Controller ，而在于文件传递给请求的方式。为确保文件已通过，您可以登录浏览器检查文件是否存在:

console.log("文件"+ data.get("文件"));

你能展示一下你用来从输入中获取文件的代码吗？

编辑:你能用这个简单的文件上传表单测试你的端点吗？

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        function handleFileSelect() {
            var data = new FormData();
            input = document.getElementById('fileinput');
            data.append('file', input.files[0]);
            console.log("file" + data.get("file"));
            $.ajax({
                method: 'POST',
                enctype: 'multipart/form-data',
                url: 'http://localhost:8080/test/recognizeCommand',
                data: data,
                processData: false,
                contentType: false,
                success: function (data) {
                    alert("works!");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }
    </script>
</head>
<body>

<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Test' onclick='handleFileSelect();'>

</body>
</html>