JSON을 사용한Spring MVC 멀티파트 요구

JSON을 사용한Spring MVC 멀티파트 요구

Spring MVC를 사용하여 JSON 데이터가 포함된 파일을 올리고 싶습니다.그래서 휴게 서비스를 개발했습니다.

@RequestMapping(value = "/servicegenerator/wsdl", method = RequestMethod.POST,consumes = { "multipart/mixed", "multipart/form-data" })
@ResponseBody
public String generateWSDLService(@RequestPart("meta-data") WSDLInfo wsdlInfo,@RequestPart("file") MultipartFile file) throws WSDLException, IOException,
        JAXBException, ParserConfigurationException, SAXException, TransformerException {
    return handleWSDL(wsdlInfo,file);
}

제가 나머지 고객으로부터 요청을 보낼 때content-Type = multipart/form-data or multipart/mixed다음 예외가 있습니다.org.springframework.web.multipart.support.MissingServletRequestPartException

이 문제를 해결하는 데 누가 도와줄 수 있나요?

사용할 수 있습니까?@RequestPartMultipart와 JSON을 모두 서버에 송신할 수 있습니까?

JSON Data를 사용하여 Spring MVC Multipart Request를 구현했습니다.

JSON 데이터를 사용한 멀티파트 요구(혼합 멀티파트라고도 함):

Spring 4.0.2 Release의 RESTful 서비스를 기반으로 첫 번째 부분은 XML 또는 JSON 형식의 데이터이고 두 번째 부분은 파일로 HTTP 요청을 @RequestPart를 사용하여 실행할 수 있습니다.다음으로 구현 예를 제시하겠습니다.

Java 스니펫:

컨트롤러의 나머지 서비스에는 이러한 멀티파트 + JSON 요청을 처리하기 위해 @RequestPart와 MultipartFile이 혼재합니다.

@RequestMapping(value = "/executesampleservice", method = RequestMethod.POST,
    consumes = {"multipart/form-data"})
@ResponseBody
public boolean executeSampleService(
        @RequestPart("properties") @Valid ConnectionProperties properties,
        @RequestPart("file") @Valid @NotNull @NotBlank MultipartFile file) {
    return projectService.executeSampleService(properties, file);
}

프론트 엔드(JavaScript) 스니펫:

1. FormData 개체를 만듭니다.

2. 다음 절차 중 하나를 사용하여 파일을 FormData 개체에 추가합니다.

   1. 파일 유형의 입력 요소를 사용하여 파일을 업로드한 경우 FormData 개체에 추가합니다. formData.append("file", document.forms[formName].file.files[0]);
   2. 파일을 FormData 개체에 직접 추가합니다. formData.append("file", myFile, "myfile.txt");또는formData.append("file", myBob, "myfile.txt");

3. 문자열화된 JSON 데이터로 BLOB를 생성하여 FormData 개체에 추가합니다.이로 인해 멀티파트 요청의 두 번째 부분의 내용 유형은 파일 유형이 아닌 "application/json"이 됩니다.

4. 요청을 서버로 보냅니다.

5. 요청 상세:
   Content-Type: undefined이로 인해 브라우저는 Content-Type을 multipart/form-data로 설정하고 경계를 올바르게 채웁니다.Content-Type을 수동으로 multipart/form-data로 설정하면 요청 경계 파라미터가 채워지지 않습니다.

Javascript 코드:

formData = new FormData();

formData.append("file", document.forms[formName].file.files[0]);
formData.append('properties', new Blob([JSON.stringify({
                "name": "root",
                "password": "root"                    
            })], {
                type: "application/json"
            }));

요청 상세:

method: "POST",
headers: {
         "Content-Type": undefined
  },
data: formData

요청 페이로드:

Accept:application/json, text/plain, */*
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryEBoJzS3HQ4PgE1QB

------WebKitFormBoundaryvijcWI2ZrZQ8xEBN
Content-Disposition: form-data; name="file"; filename="myfile.txt"
Content-Type: application/txt


------WebKitFormBoundaryvijcWI2ZrZQ8xEBN
Content-Disposition: form-data; name="properties"; filename="blob"
Content-Type: application/json


------WebKitFormBoundaryvijcWI2ZrZQ8xEBN--

효과가 있을 거야!

클라이언트(클라이언트):

$scope.saveForm = function () {
      var formData = new FormData();
      var file = $scope.myFile;
      var json = $scope.myJson;
      formData.append("file", file);
      formData.append("ad",JSON.stringify(json));//important: convert to JSON!
      var req = {
        url: '/upload',
        method: 'POST',
        headers: {'Content-Type': undefined},
        data: formData,
        transformRequest: function (data, headersGetterFunction) {
          return data;
        }
      };

백엔드 스프링 부트:

@RequestMapping(value = "/upload", method = RequestMethod.POST)
    public @ResponseBody
    Advertisement storeAd(@RequestPart("ad") String adString, @RequestPart("file") MultipartFile file) throws IOException {

        Advertisement jsonAd = new ObjectMapper().readValue(adString, Advertisement.class);
//do whatever you want with your file and jsonAd

다음 방법으로 목록을 사용할 수도 있습니다.List<MultipartFile>그리고.@RequestPart("myObj")내부 메서드의 매개 변수로서@RestController

    @PostMapping()
    @ResponseStatus(HttpStatus.CREATED)
    public String create(@RequestPart("file") List<MultipartFile> files, @RequestPart("myObj") MyJsonDTOClass myObj) throws GeneralSecurityException, IOException {
        // your code

    }

그리고 공리 쪽에는 약간의 반응이 있습니다.

            const jsonStr = JSON.stringify(myJsonObj);
            const blob = new Blob([jsonStr], {
                type: 'application/json'
            });

            let formData = new FormData();
            formData.append("myObj",blob );
            formData.append("file", this.state.fileForm); // check your control 
            let url = `your url`            
            let method = `post`
            let headers =
                {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                };
            }

            axios({
                method,
                url,
                data: formData,
                headers
            }).then(res => {
                console.log(res);
                console.log(res.data);
            });

프로젝트에서는 JSON과 파일을 사용한 포스트 요청으로 프런트엔드와 백엔드 개발자 간에 많은 혼란이 발생하여 불필요한 시간 낭비를 초래하고 있습니다.

여기에서는 파일 바이트 배열을 Base64 문자열로 변환하여 JSON으로 전송합니다.

public Class UserDTO {
    private String firstName;
    private String lastName;
    private FileDTO profilePic; 
}

public class FileDTO {
    private String base64;
    // just base64 string is enough. If you want, send additional details
    private String name;
    private String type;
    private String lastModified;
}

@PostMapping("/user")
public String saveUser(@RequestBody UserDTO user) {
    byte[] fileBytes = Base64Utils.decodeFromString(user.getProfilePic().getBase64());
    ....
}

파일을 base64 문자열로 변환하기 위한 JS 코드:

var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {

  const userDTO = {
    firstName: "John",
    lastName: "Wick",
    profilePic: {
      base64: reader.result,
      name: file.name,
      lastModified: file.lastModified,
      type: file.type
    }
  }
  
  // post userDTO
};
reader.onerror = function (error) {
  console.log('Error: ', error);
};

설명서에 기재되어 있는 바와 같이:

이름으로 식별된 "멀티파트/폼 데이터" 요청 부분을 찾을 수 없을 때 발생합니다.

이는 요청이 다중 파트/폼 데이터가 아니거나 해당 부품이 요청에 없거나 웹 응용 프로그램이 다중 파트 요청을 처리하도록 올바르게 구성되지 않았기 때문일 수 있습니다(예: MultipartResolver 없음).

Angular2+ 사용자용.다음과 같이 혼합 부품 요청으로 JSON 페이로드 전송을 시도합니다.

formData.append("jsonPayload", new Blob([JSON.stringify(json)], {
  type: "application/json"
}));

아래에 완전한 기능이 제시되어 있습니다.

submit() {
    const formData = new FormData();
    formData.append('file', this.myForm.get('fileSource').value);
    var json = {
        "key":"value"
    };

  formData.append("jsonPayload", new Blob([JSON.stringify(json)], {
    type: "application/json"
  }));

  this.http.post('http://localhost:8080/api/mixed-part-endpoint', formData)
  .subscribe(res => {
    console.log(res);
    alert('Uploaded Successfully.');
  })
}

언급URL : https://stackoverflow.com/questions/21329426/spring-mvc-multipart-request-with-json