각도 : 양식 제출시 서버에 파일을 게시하는 방법

Question

양식이 백 엔드에 게시됩니다 (Kotlin, Spring Web). 이 양식에는 일부 텍스트 입력이 있었으며 게시물은 완벽하게 작동했습니다.

보기 :

<form ng-submit="insert(config)"> 
    <input type="text" ng-model="config.name"> 
    <input type="text" ng-model="config.address"> 
    <input type="file" ng-model="config.file"> 
    <button type="submit">Save</button> 
</form> 

컨트롤러 여기

{status: 400, error: "Bad Request",…} error: "Bad Request" exception: "org.springframework.http.converter.HttpMessageNotReadableException" message: "Could not read document: No suitable constructor found for type [simple type, class com.test.InsertConfigCommand]: can not instantiate from JSON object (missing default constructor or creator, or perhaps need to add/enable type information?)↵ at [Source: java.io.PushbackInputStream@2cb43211; line: 1, column: 2]; nested exception is com.fasterxml.jackson.databind.JsonMappingException: No suitable constructor found for type [simple type, class com.test.InsertConfigCommand]: can not instantiate from JSON object (missing default constructor or creator, or perhaps need to add/enable type information?)↵ at [Source: java.io.PushbackInputStream@2cb43211; line: 1, column: 2]" 

내 스택의 코드입니다 : 내가 파일 입력을 추가하지만, 포스트는 다음과 같은 오류를 반환 작동이 중지 프런트 엔드 :

$scope.insert = function (config) { 
    $http.post('/config', config) 
     .then(function (response) { 
      $.snackbar({content: "Success!"}); 
     }, $scope.showErrorMessage); 
}; 

컨트롤러 (백 엔드) :

@RequestMapping(method = arrayOf(RequestMethod.POST)) 
fun insert(@RequestBody config: InsertConfigCommand) = service.save(config) 

InsertConfigCommand는

data class InsertConfigCommand (
    val name : String = "", 
    val address : String = "", 
    val file : MultipartFile 
) 

나는 다음과 같은 방법으로 게시물을하려고 노력했습니다, 작동,하지만 파일을 전송 :

컨트롤러 (프런트 엔드) :

$scope.insert = function (file) { 
    var fd = new FormData(); 
    fd.append('file', file); 

    return $http.post('/config', fd, { 
     transformRequest: angular.identity, 
     headers: { 
      'Content-Type': undefined 
     } 
    }); 
}; 

컨트롤러 (백 엔드) :

@RequestMapping(method = arrayOf(RequestMethod.POST)) 
fun insert(@RequestParam(value = "file", required = true) file: MultipartFile) = service.save(file) 

어떤이 게시물 작동하려면 나는 변경해야합니까? 입력 파일 같은 개체에 그 이름과 주소를 보내고 싶습니다.

Answer 1

나는 FormData 객체 내부의 파일을 캡슐화이 튜토리얼을 사용했습니다, 그리고 https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

$scope.insert = function (config) { 
    var fd = new FormData(); 
    fd.append('name', config.name); 
    fd.append('address', config.address); 
    fd.append('file', $scope.file); 
    $http.post('/config', fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .then(function (response) { 
      $.snackbar({content: "Success!"}); 
     }, $scope.showErrorMessage); 
}; 

그리고 내 코 틀린 컨트롤러 객체 게시물, 나는 별도의 PARAM 각 속성이 나타납니다

@RequestMapping(method = arrayOf(RequestMethod.POST)) 
fun insert(@RequestParam(value = "name", required = true) name: String, 
      @RequestParam(value = "address", required = true) address: String, 
      @RequestParam(value = "file", required = false) file: MultipartFile): InsertConfigCommand? { 

    val command = InsertConfigCommand(
        name = name, 
        address = address, 
        file = file) 

    return service.save(command) 
} 

Answer 2

잭슨을 사용하고 있다고 가정하겠습니다. 맞습니까?

Kotlin의 데이터 클래스의 바이트 코드는 (기본 생성자가있는) 일반 POJO와 다르게 보이므로 Jackson은 이러한 클래스를 초기화 할 수 없습니다. Jackson Kotlin Module에 종속성을 추가하고 등록하십시오.

당신이 봄 부팅 후 @Configuration 어노테이션 클래스의에 다음 코드를 추가하여 사용하는 경우 :

@Bean 
open fun kotlinModule(): KotlinModule { 
    return KotlinModule() 
} 

을하고 도움이되는지 확인합니다.