将文件从 AngularJS 控制器上传到用 Kotlin 编写的 Spring

Question

Whosebug 上已经有一些类似的问题。我已经经历了其中的一些，但它们对我不起作用。所以请不要将此问题标记为 duplicate.

我想使用 AngularJS 将文件上传到用 Kotlin 编写的 Spring 控制器。为此，我编写了下面的代码，但它不起作用。我收到 404 错误的请求响应，其中包含 Required request part 'file' is not present

的消息

输入

<form class="col-xs-12 col-sm-4 form-inline " ng-submit="$ctrl.saveFiles()">
    <div class="form-group">
      <label for="file-upload" class="custom-file-upload">
        Choose File
      </label>
      <input id="file-upload" type="file"  file-model="$ctrl.file" name="file"/>
    </div>
    <div class="form-group">
      <button class="btn btn-primary pull-right" type="submit">Submit</button>
    </div>
</form>

file-model 指令

app.directive('fileModel', ['$parse', function ($parse) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function () {
          scope.$apply(function () {
            modelSetter(scope, element[0].files[0]);
          });
        });
      }
    };
  }])

我从这个

复制了这个指令

$ctrl.saveFiles() 函数

    $ctrl.saveFiles = function () {
      // var file = document.getElementById("file-upload").files[0]
      var formData = new FormData();

      formData.append("file", $ctrl.file);

      console.log(formData.has("file"));  // true

      var url = '/upload',
        config = {
          transformRequest: angular.identity,
          headers: {'Content-Type': undefined}
        };
      return $http.post(url, formData, config)
    };

Spring @bean

    @Bean
    open fun multipartResolver(): MultipartResolver {
        val multipartResolver = CommonsMultipartResolver()
        multipartResolver.setMaxUploadSize(500000000)
        return multipartResolver
    }

Spring @PostMapping 方法

    @PostMapping(value = "/upload")
    @Throws(Exception::class)
    fun uploadFile(@RequestParam("file") file: MultipartFile): String {
        return "Upload file"
    }

请求header

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 4829202
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryJ8BRhjvMRLt9UdRS

如你所见，虽然我使用 Kotlin，但在 Java 中回答完全没问题。

Answer 1

这是我第一次使用 AngularJS 和 Spring 上传文件。有些人使用CommonsMultipartResolver。我已经这样做了。但是，我不需要使用它。

由于使用CommonsMultipartResolver，我无法上传文件。我删除了下面的代码，它按预期工作。但是，出于某种原因，我无法上传与 unsplash photo

一样大的文件

@Bean
open fun multipartResolver(): MultipartResolver {
  val multipartResolver = CommonsMultipartResolver()
  multipartResolver.setMaxUploadSize(500000000)
  return multipartResolver
}

将文件从 AngularJS 控制器上传到用 Kotlin 编写的 Spring

Upload file from AngularJS controller to Spring writtin in Kotlin

spring

multipartform-data

form-data

kotlin

angularjs

输入

file-model 指令

$ctrl.saveFiles() 函数

Spring @bean

Spring @PostMapping 方法

请求header