simpleBlog 개발 일지 (4)
시작하며..
이번에 추가한 기능은 posts에 파일을 포함하는 기능입니다. 블로그에 글을 쓸 때 제목, 내용과 함께 글을 나타내는 이미지를 포함하면 좋겠다는 생각이 나서 시도해 봤습니다.
추가한 기능
posts에 이미지를 포함시키기 위해서는 파일을 업로드하는 기능을 추가해야 합니다. 업로드할 파일을 고르는 기능을 구현하는 방법은 인터넷에 많이 나와있고, 간단해서 쉽게 할 수 있었습니다.
<form enctype="multipart/form-data" id="form"> ...
<div class="form-group row">
...
<input type="file" name="file" id="file">
</div>
위와 같이 form 안에 <input type=”file”> 태그를 집어넣어 주면 다음과 같이 될 수 있습니다.
이제 생각해 봐야 할 것은 이 파일을 어떻게 서버로 보낼지 생각해 봐야 합니다.
저는 기존에 작성한 글(posts)을 서버로 보낼 때 JSON 포맷으로 만들어서 보내고, controller에서 RequestBody로 받는 방식을 사용했습니다.
이번에 고민을 많이 했던 부분은 file을 어떤 방법으로 보내야 할까 생각을 많이 했습니다. 데이터를 보낼 때 JSON 포맷으로 보내고 싶은데 file은 JSON에 포함될 수 없습니다.
여러 가지 방법을 한참 찾아보다가 JSON과 file을 같이 보낼 수 있는 방법을 찾았습니다. 그 방법은 FormData 안에 file과 JSON을 같이 포함시키는 방법입니다.
파일을 보내는 부분의 javascript 부분은 다음과 같이 작성했습니다.
FormData를 만들어 주고, 거기에 file과 JSON을 append를 이용해 포함시키는 방법입니다.
그리고 controller 부분은 다음과 같이 만들어 봤습니다.
기존에는 JSON 객체 하나만 받으면 돼서 Requestbody를 사용했었는데, file을 포함한 다중 요청을 처리하기 위해 RequestPart를 사용했습니다.
그리고 결과는..
파일을 받아오고 화면에 띄우는 것까지 성공했습니다.
마치며..
인터넷에 있는 글들은 JSON과 file을 같이 보내는 예제가 많지 않아서 문제를 해결하는 데 오래 걸렸습니다. 아마도 인터넷상에서 사용되는 코드가 돌고 돌아서 그런 것 같습니다.
아무튼 파일을 저장하고 띄우는 것까지 성공했으니 게시글을 보기 좋게 다듬어야 할 것 같습니다.
