window.addEventListener('load', addEventFile);
/*업로드 버튼에 이벤트 걸어주는 함수*/
function addEventFile()
{
document.getElementById('post').addEventListener('click', _post);
}
/* 포스트 방식으로 업로드하는 함수 */
function _post()
{
}
::기본적으로 보낼 데이터
170kb 에 pdf 파일
:: 실행 화면
:: 조건 1. 외부 라이브러리나 외부 의존성을 주입한 소스는 사용하지 않고 기본 함수, 스프링 어노테이션만 사용한다. 2. 전송데이터는 기본적인 파일을 보내며, 데이터의 경우 Map<String, Map>과 같이 복잡한 데이터 형태는 사용하지 않는다. 3. 환경설정이나 기타 config 설정을 변경하지않고, rest api 통신명세를 지키려고 노력한다. 4. 제이쿼리 ajax를 사용하지않고 최소한의 설정과 소스로 기능을 우선적으로 구현한다. 5. 남들이 그대로 복붙해서 사용가능한 소스가 되자
파일업로드 소스 간단하게 적용
기존적인 file을 formData에 넣어서 POST로 전송하는 방식
사용하는 JS소스
function _post()
{
let inFile = document.getElementById('postFile').files[0];
let inData = new FormData();
inData.append('file', inFile);
fetch( 'file'
, {
method : "POST"
,body : inData
,headers: {}
}
);
}
@PostMapping(value = "/filePart")
private String postPartFile(@RequestParam final Map<String, String> param, @RequestPart final MultipartFile file)
{
/*대강 파일 업로드 성공은 200, 실패는 400 코드를 클라이언트로 보내겠습니다.*/
if (file.getSize() > 0)
{
/* 파일을 업로드하는 방식은 생략하겠습니다. */
return "200";
}
else
{
return "400";
}
}
실행 화면 문제없이 값들이 들어온 모습, 따라서 받아온 파일과 데이터로 파일을 저장해주시고, DB에도 인서트해주시면 되겠습니다~통신이 완료되면 rs.ok 값이 true / false로 들어온다. 참일경우 if절, 아닐경우 else절로 보내는 로직rs에는 응답 형식이 들어옵니다. 저기 status는 아까 서버에서 가져온 200 과는 전혀 무관합니다.통신성공하여 나온 콘솔서버단에서 응답받은 "200"에 대해서 JS 멋대로 숫자화 했지만 어림없지, 방어로직으로 toString()을 썻는걸?승리의 얼러트 설명 :현재의 방법은 서버로 파일과 데이터를 넘겨서 DB와, 파일업로드를 완료한다음 서버단에서 응답을 받아 그것을 처리하는 것으로 사용했다. 현재 이 소스를 그냥 복붙해서 사용해도 기본적인 스프링설정이 되어있다면 문제가 없을 것입니다.
다만 fetch() 를 처음 접하시는 분에게는 조금 생소하실 것으로 알고있습니다. $ 쓰고 옵션 여러개 붙이고 컴마 안찍어서 컴파일러오류나고, 오타나고 등등을 저는 이 방법을 사용했더니 깔끔해져서 요즘 많이 사용하고있고 현업에서 프로젝트들 중 $AJAX를 사용하면서 파일업로드를 하는 소스를 최근까지 보일때마다 변환했었네요.
여기까지 fetch() 를 이용해서 간단한 소스로 파일을 서버로 전달하는 방법을 포스팅 해보았습니다 .
댓글