파일과 DTO 함께 올리기 에 관련된 연장선

Controller

• POSTMAN을 활용하여 데이터가 넘어가는것을 확인한상황

• 실행되는 POSTMAN

DTO

axios

const formData = new FormData();
    e.preventDefault();
    const data = {
      userSeq,
      categorySeq: parseInt(categorySeq),
      nickname,
      introduction: introduction.value,
    };
    formData.append("file", imgFile);
		//formData.append("request", JSON.stringify(data));
    formData.append("request", new Blob([data]), { type: "application/json" });
    axios
      .post("<http://localhost:8082/character>", formData, {
        headers: {
          //"Content-Type": false,
          //"Content-Type": "multipart/form-data",
        },
      })

시도

• file 을 함께 보내야한다면 FormData 에 담아서 보낸다고 한다

• 선언

  const formData = new FormData();

• 데이터 삽입(파일)

  formData.append("file", imgFile);

• 데이터 삽입(DTO)은 찾은거론 두가지가 있는데 다음과 같음

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

• 첫번째는 데이터를 binary 로 변환하여 전송되며, 전송되는 데이터는 다음과 같음

• 두번째는 데이터를 json 으로 전송되며, 전송되는 데이터는 다음과 같음

• 일단 둘다 HttpMediaTypeNotSupportedException 이 발생하며, 로그는 다음과 같음

• application/octet-stream 은 8비트 바이너리 데이터를 의미하고, 딱히 파싱될것같은게 없을때 기본값으로 사용한다고 한다. 근데 그런 기본값도 안된다. ?.?

• 아 그리고 파일 하나만 보내게된다면 받아지는데 , DTO는 하나만 보내도 안받아지고있는 상태

시도해본것

1. Spring에 consumes = {"multipart/form-data"} 추가 및 axios 의 헤더에 multipart/form-data 추가
2. @RequestPart 로 파일, DTO를 나누지 않고 하나의 DTO로 묶어 Spring에서@ModelAttribute 하나로 받기
3. DTO만 param 으로 보내고 Spring 에서 @RequestParam 으로 받기
4. DTO binary 로 변환하여 보내기, JSON 으로 보내기
5. Jackson Databind MAVEN 추가

여기가 제일 비슷한것 같은데 안된다

https://medium.com/jaehoon-techblog/simpleblog-개발-일지-4-55a8d2a8604

https://gaemi606.tistory.com/entry/Spring-Boot-multipartform-data-파일-업로드-React-Axios-REST-API?category=745027

해결

• 단순 괄호 범위 문제... 왜 자바스크립트는 개발자를 믿을까

backend

• @RequestPart 어노테이션을 사용하여 file과 DTO를 나눠주어야 한다

@RequestPart(value="file", required = false) MultipartFile[] file,
@RequestPart(value="request") SendCharacterCreateRequest request

• 들어오는 DTO 는 JSON 형태로 들어오게 되고, file 은 해당 service를 호출하면 된다

frontend

• 현재 file 은 새로 custom axios 를 만들어놓은 상태
• Send 와 똑같이 사용하면 된다

1. request로 보낼 FormData를 선언해준다

   

2. DTO 도 보내야 한다면 JSON 파일도 선언해준다

   

3. FormData.append(key, value) 형식으로 FormData 에 데이터를 담아준다

   DTO 처럼JSON 데이터같은 경우는 binary file 로 변환해야 하기 때문에 new Blob 로 선언해야 한다. binary file 로 변환하며 타입을 내부에 명시해줘야한다.

   

4. 보낼때는 일반 axios 를 전송하듯 보내면 된다

const formData = new FormData();    // 1번
const request = {                   // 2번
  userSeq,
  nickname: nickname.value,
};
formData.append("file", imgFile);   // 3번
formData.append("request", new Blob([JSON.stringify(request)], { type: "application/json" }));

File.post("/character", formData)   // 4번
  .then((res) => {
    if (res.status == 200) alert("캐릭터 생성이 완료되었습니다.");
		else alert("캐릭터 생성에 실패했습니다.");
})

추가적으로 알게된것

LOB

• TEXT, 그래픽, 이미지, 비디오, 사운드 등 구조화되지 않은 대형 데이터의 저장 목적
• BLOB, CLOB등 종류가 있다

BLOB(Binary Large Object)

• binary 데이터를 DB 외부에 저장하기 위해 사용
• 이미지, 동영상, MP3 등
• SQL 에서 비트열 타입으로 입출력 값을 표현
• 컴퓨터가 인식하는 모든 파일(이진 데이터)를 저장하는 타입

CLOB(Character Large Object)

• 문자열 데이터를 DB 와부에 저장하기 위해 사용
• 문자 기반 데이터 보관용