[위치기반 푸드트럭 서비스] 게시판 이미지 업로드

안녕하세요 강정호입니다. 오늘은 위치기반 푸드트럭 서비스에서 게시판의 이미지를 어떻게 업로드 하였는지에 대해 알아보겠습니다.

1단계 : 글쓰기 버튼 클릭

---

빨간색 안의 글쓰기 버튼을 클릭하게 되면 이벤트가 발생하여 Controller를 통해서 글쓰기 폼으로 이동시켜줍니다.

<script type="text/javascript">
    $(document).ready(function(){
        $("#writeBtn").click(function(){
            location.href="${pageContext.request.contextPath}/afterLogin_board/freeboard_write_form.do";
        })//click
    })//ready
</script>

위와 같이 writeBtn 아이디를 가진 버튼을 클릭하면 Controller의 freeboard_write_form.do 로 이동하게 됩니다.

2단계 : 글쓰기 폼에서 이미지 업로드

---

<form enctype="multipart/form-data" action="${pageContext.request.contextPath }/freeboard_write.do" method="post">  
        <div class="row"> 
            <div class="col-md-6"> 
            <div class="form-group"> 
            <label for="writer">작성자</label> 
            <input type="text" class="form-control" name="writer" id="writer" value="${sessionScope.memberVO.memberName }" readonly> 
            </div> 
            </div>
            <input type="hidden" id="id" name="id" value="${sessionScope.memberVO.id }">
        </div> 
        
        <div class="form-group" style="margin-right: 70px"> 
        <label for="title">글제목</label> 
        <input type="text" class="form-control" name ="title" id="title" value="" required="required"> 
        </div> 
        
        <div class="form-group" style="margin-right: 70px"> 
        <label for="content">글내용</label> 
        <textarea class="form-control" rows="10" name="content" id="content" required="required"></textarea> 
        </div>
        
 
        <div class="form-group"> 
        <label for="File">첨부파일 1</label> 
        <input type="file" name="file[0]"> 
        </div> 
        <div class="form-group"> 
        <label for="File">첨부파일 2</label> 
        <input type="file" name="file[1]"> 
        </div> 
        <div class="form-group"> 
        <label for="File">첨부파일 3</label> 
        <input type="file" name="file[2]"> 
        </div> 
        
        <div class="center-block" style='width:400px' align="center"> 
        <input type="submit" class="btn btn-info" value="등록하기" style="background-color: #2dcb73">&nbsp;&nbsp;
        <input type="reset" class="btn btn-info"  value="다시쓰기" style="background-color: #2dcb73">&nbsp;&nbsp;
        <input type="button" class="btn btn-info"  value="취소" id="cancelBtn" style="background-color: #2dcb73">
        </div>
</form> 

이 코드에서는 맨 위의 form 태그에서의 인코딩 타입을 확인해야 합니다. 

<form> 태그에서 enctype="multipart/form-data" 라는 속성을 반드시 추가해 주어야 합니다. 그렇지 않으면 웹 서버로 데이터를 넘길 때 파일의 경로명만 전송되고 파일 내용이 전송되지 않기 때문입니다.

위에 작성된 form 태그의 속성

method : 전송방식 POST or GET

action : 전송 목적지 혹은 URL. 여기서는 Controller로 전송

enctype : 전송되는 데이터 형식을 설정

**enctype에 대한 보다 상세한 내용

enctype 속성은 다음 세 가지의 값으로 지정될 수 있다.

1. application/www-form-urlencoded

디폴트 값이다. enctype을 따로 설정하지 않으면 이 값이 설정된다. form 데이터는 서버로 전송되기 전에 URL-Encode가 된다.

2. multipart/form-data

파일이나 이미지를 서버로 전송할 경우 이 방식을 사용한다.

3. text/plain

이 형식은 인코딩을 하지 않은 문자 상태를 전송한다.

3단계 : Service 레이어에서 파일 업로드

---

@Override
    public void freeboardWrite(BoardVO bvo, HttpServletRequest request) {
        HttpSession session = request.getSession(false);
        MemberVO mvo = (MemberVO) session.getAttribute("memberVO");
        bvo.setId(mvo.getId());
        // 글 정보먼저 insert한다.
        String contentNo = boardDAO.freeboardWrite(bvo);
        
        // 그 다음 파일 이름을 insert한다
        //String uploadPath="C:\\Users\\KOSTA\\git\\wheelwego\\asechs_wheelwego\\src\\main\\webapp\\resources\\img\\";
 
        //파일 업로드 path 설정
        // getServletContext()를 사용하여 웹 서비스 디렉토리의 물리적 경로를 구한다.
        String uploadPath=request.getSession().getServletContext().getRealPath("/resources/img/");
        
        //파일 리스트를 getFile()로 받는다.
        List<MultipartFile> fileList=bvo.getFile();
        ArrayList<String> nameList=new ArrayList<String>();
        for(int i=0; i<fileList.size(); i++){
            if(fileList.isEmpty()==false){
                BoardVO boardVO=new BoardVO();
                FileVO fileVO=new FileVO();
                String fileName=fileList.get(i).getOriginalFilename();
                if(fileName.equals("")==false){
                    try{
                        //업로드된 이미지 파일을 transferTo 메서드를 사용하여 업로드 경로에 전송한다.
                        fileList.get(i).transferTo(new File(uploadPath+fileName));
                        fileVO.setNo(contentNo);
                        fileVO.setFilepath(fileName);
                        boardVO.setFileVO(fileVO);
                        nameList.add(fileName);
                        //업로드된 파일의 정보를 데이터베이스에 저장한다.
                        boardDAO.freeboardWriteFileUpload(boardVO);
                    } catch (IllegalStateException | IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    }

첫 번째로 파일을 업로드할 경로를 설정해줍니다. 이 때 getServletContext()와 getRealPath() 메서드를 사용합니다. getServletContext()를 사용하여 웹 서비스가 실행되고 있는 서블릿의 위치 경로를 반환합니다. 그리고 거기에 getRealPath()로 이미지를 업로드할 최종 경로를 지정해줍니다.

두 번째로 form 태그로부터 받은 파일을 List 형태로 반환 받습니다. 그렇게 하여 for문을 돌려서 각 파일을 transferTo() 메서드를 이용하여 미리 지정한 경로로 파일을 전송합니다.

마지막으로 파일에 대한 경로, 이름 등의 정보는 fileVO를 생성하여 데이터베이스에 저장합니다.

4단계 : 파일 업로드 완성

---

위와 같이 이미지 파일을 업로드 하여 글을 작성할 수 있도록 구현하였습니다!!

이번 포스팅에서 소개한 파일 업로드는 제가 직접 구현한 것들입니다. 하지만 스프링에서 제공하는 파일 업로드 클래스들이 따로 있으니 아래 링크에서 참고해보시면 좋을거 같습니다.

스프링 부트 파일 업로드 레퍼런스