[JAVA] Spring을 이용하여 파일 업로드를 해보자. (1) ( feat Vue.js , axios )

오늘은 파일 업로드에 대한 글을 정리 해보려고 한다. 입사하고 나서 진짜 정말 너무 이해가 안되었던 게

파일업로드이다. 그때 일주일 정도 잡고 했는데, 안되서 회사 선배가 짜놓은 코드를 그대로 갖다 쓴 기억이 있다..

솔직히 전자정부 프레임워크를 쓰고 있는지라 아직도 파일 업로드를 완전히 알고 있지는 않지만,

그래도 지금 아는 것만이라도 정리를 해보려고 한다. ( 틀린 곳이 있으면 답글 좀.. )

 

파일을 업로드하면 다음과 같은 로직을 태운다.

1. 파일 정보를 DB에 적재.

2. 파일을 실제 서버에 적재 ( 물리서버 또는 NAS )

 

오늘은 서버에 파일을 업로드 하는 것만 정리해보겠다.

 

============================================================================

 

1. 프론트엔드 단 ( 공통 )

JSP단

 

JS단

이렇게 프론트단을 작성하였다.

프론트단에서 하는 역할은 파일을 추가한 뒤, 해당 파일을 배열에 담고 (다중 업로드시)

등록 버튼을 누르면 해당 파일들을 formData에 append하여, axios로 서버를 호출하는것이다.

그럼 아래와 같이 된다.

 

파일을 등록함.

파일을 등록하면 inputData 함수가 호출되며, file을 fileList에 push해줌.

 

이제 해당 fileList를 가지고 for문을 돌려 formData에 append해주면 다음과 같이 formData안에

제대로 데이터가 들어간 것을 확인 할 수 있다.. ( 파일을 2개 등록했으니, 파일이 2개 콘솔에 찍힘 )

 

자 이제 이 formData를 파일을 업로드 할 URL로 보내주기만 하면 프론트단의 역할은 끝이 난다.

============================================================================

이렇게 백단에서 multiparthttpservletrequest 객체를 활용하여 파일을 받을 수 있다.

그리고 아래와 같이 multiparthttpservletrequest 객체 (이하 request)안에 있는 parts라는 녀석에 파일에 대한

정보가 담기게 된다.

parts안에 파일 2개가 들어간 모습

자 여기까지는 공통이고, Service단에서 (1)서버에 적재, (2)DB테이블에 Insert를 해주면 된다~  

업로드 한 파일을 서버에 적재

파일을 서버에 적재 

위 이미지와 같이 request에서 파일을 꺼내 파일 갯수만큼 파일을 작성해준다. 그럼 해당 경로에 파일이 생성되는 것을 확인 할 수 있다.

여기서는 로컬에 저장을 하였지만, 개발을 할때에는 실제 서버 경로나, NAS서버에 올리면 되겠다~