使用 JS Fetch API 上传时有效负载过大错误 (413)。通过邮递员工作正常

Posted 2023-02-27

【中文标题】使用 JS Fetch API 上传时有效负载过大错误 (413)。通过邮递员工作正常

【英文标题】：Payload too large error (413) when uploading using JS Fetch API. Works fine via Postman

【发布时间】：2020-12-22 18:06:23

【问题描述】：

我有一个分段上传 API，当我通过 Postman 上传文件时，它可以完美运行。但是，当我通过相同的 API 上传但使用 Fetch API 时，会出现 413 错误。

我尝试了here 给出的解决方案，但没有奏效。

我的JS代码如下-

async function uploadAudio(formElements) 

    const formData = new FormData();
    const file = fileUploadField.files[0];
    formData.append("file", file);

    console.log("Name: " + file.name); // Prints the correct file name
    console.log("Size: " + file.size); // Prints the correct size (which is < than what is set server side)

    const options = 
          method: 'POST',
          body: formData,
          headers: 
            'Content-Type': 'multipart/form-data',
            'Accept': 'application/json',
            'Authorization': 'Bearer ' + authTokenArr[0]
          
        ;

    const response = await fetch(base_url + "/audio/file", options);
    const data = await response.json();

    if (response.ok) 
        handleSuccess(data);
     else 
        handleFail(data);
    
 

application.properties文件-

# max file size
spring.servlet.multipart.max-file-size=10MB
# max request size
spring.servlet.multipart.max-request-size=10MB 

REST 控制器 -

@PostMapping("file", produces = [ProduceTypes.JSON])
    fun uploadAudio(@RequestParam("file") file: MultipartFile,
                      @RequestHeader (name="Authorization") token: String): ResponseEntity<MutableMap<String, Any>> 

        val user: User = userService.getUserDetailsByToken(token)

        val body: MutableMap<String, Any> = LinkedHashMap()
        body["status"] = ApiStatus.UPLOADED
        body["fileId"] = podcastFileService.uploadFileToB2(user, file)

        return ResponseEntity(body, HttpStatus.CREATED)
    

这是我的服务器端日志 -

2020-09-03 18:56:02.288 DEBUG 40716 --- [nio-8080-exec-7] o.s.web.servlet.DispatcherServlet        : POST "/audio/file", parameters=
2020-09-03 18:56:02.293 DEBUG 40716 --- [nio-8080-exec-7] .m.m.a.ExceptionHandlerExceptionResolver : Using @ExceptionHandler com.krtkush.audiotime.globalexceptions.GlobalExceptionHandler#handleMultipartException(MultipartException)
2020-09-03 18:56:02.356 DEBUG 40716 --- [nio-8080-exec-7] o.s.w.s.m.m.a.HttpEntityMethodProcessor  : Using 'application/json', given [application/json] and supported [application/json, application/*+json, application/json, application/*+json]
2020-09-03 18:56:02.357 DEBUG 40716 --- [nio-8080-exec-7] o.s.w.s.m.m.a.HttpEntityMethodProcessor  : Writing [timestamp=2020-09-03T18:56:02.297867, message=Maximum file size acceptable is 10MB]
2020-09-03 18:56:02.364 DEBUG 40716 --- [nio-8080-exec-7] .m.m.a.ExceptionHandlerExceptionResolver : Resolved [org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found]
2020-09-03 18:56:02.364 DEBUG 40716 --- [nio-8080-exec-7] o.s.web.servlet.DispatcherServlet        : Completed 413 PAYLOAD_TOO_LARGE

当 API 通过 Postman 正常工作时，甚至在使用带有非 REST 控制器的 mustache 模板上传时，为什么会出现大小问题。

【参考方案1】：

原来'Content-Type': 'multipart/form-data' 是问题所在。当我删除它时它起作用了。 @Kostiantynhere 的评论帮助了我。