💡 게시판 - 파일 업로드

박상민·2023년 9월 9일

project 게시판 파일 업로드

나의 작은 프로젝트

목록 보기

5/10

이번에는 게시판의 파일 업로드에 관해서 작성을 하겠다. 이번 글은 업로드만 다루고 파일 다운로드에 관해서는 더 공부를 하고 작성을 하겠다.

우선 다음의 2가지가 필요하다

파일이 저장된 경로와
파일의 이름

mariaDB에 컬럼을 추가하겠다.

filename : 파일의 이름에 해당하는 컬럼
filePath : 파일의 저장된 경로에 해당하는 컬럼

DB의 Table을 수정했으니 Entity 또한 수정을 하겠다.

Board

@Entity
@Data
public class Board extends TimeEntity{

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private String title;
    private String content;
    private String author;

	// 파일 업로드를 위한 필드 추가
    private String filename;
    private String filepath;

    //수정을 위한 생성자
    public Board(String title, String content, String author) {
        this.title = title;
        this.content = content;
        this.author = author;
    }

    //기본 생성자 추가!
    public Board() {

    }
}

DB의 테이블에 filename, filepath를 추가했기에 Entity인 Board에도 private Strinf filename, private String filepath를 추가한다.

Entity까지 수정을 했으니 게시글 작성 페이지를 수정해서 파일 업로드 부분을 만들어주겠다.

boardWrite.html

<body>
<div class="container">
    <h1>게시글 작성</h1>
    <form th:action="@{/board/write}" method="post" enctype="multipart/form-data"> <!--추가된 부분-->
        <div class="form-group">
            <label for="title">제목</label>
            <input type="text" id="title" name="title" required>
        </div>
        <div class="form-group">
            <label for="author">작성자</label>
            <input type="text" id="author" name="author" required>
        </div>
        <div class="form-group">
            <label for="content">내용</label>
            <textarea id="content" name="content" rows="8" required></textarea>
        </div>
        <!--새로 추가된 부분-->
        <input type="file" name="file">
        <!---->
        <button type="submit" class="btn">작성 하기</button>
    </form>
</div>
</body>

파일 업로드를 해주기 위해서는 속성을 추가해줘야한다.
boardWrite의 form에 enctype="multipart/form-data이 추가되었다.
또한, 입력창인 <input type="file" name="file">추가되었다. 이제 실행을 해서 확인을 해보자.

게시글 작성 페이지

게시글 작성 페이지로 오면 위 사진 처럼 파일을 선택할 수 있는 태그가 추가된 것을 확인할 수 있다.
그러나 아직 파일을 선택해서 작성을 해도 DB에 저장되지 않기 때문에 코드를 추가하고 업로드한 파일을 저장할 디렉토리를 하나 만들겠다.

resources/static/files

우선 파일을 저장할 디렉토리를 하나 만들어준다.

BoardService/save 수정 전

public Board save(Board board) {
     return boardRepository.save(board);
}

BoardService/save 수정 후

public void save(Board board, MultipartFile file) throws Exception {

    //저장할 경로를 지정
    String projectPath = System.getProperty("user.dir") + "/src/main/resource/static/files";

    // 랜덤 식별자 생성
    UUID uuid = UUID.randomUUID();

    // uuid + _ + 파일의 원래 이름
    String fileName = uuid + "_" + file.getOriginalFilename(); 

    //파일을 생성할 것인데 경로는 projectPath, 이름은 filename로 담긴다는 뜻
    File saveFile = new File(projectPath, fileName);

    file.transferTo(saveFile);
    
    board.setFilename(fileName); //DB에 filename 저장
    board.setFilepath("/files/" + fileName); //DB에 파일 저장 경로 저장
        
    boardRepository.save(board)    
}

게시글을 작성하는 코드인 save 메소드에 MultipartFile file 매개변수를 추가한다. 이는 파일을 받는 역할을 한다.

이때 주의할 것이 있다. 저장할 경로를 지정할 때 윈도우와 맥의 경우 다른 부분이 존재한다.

윈도우
- "\\src\\main\\resource\\static\\files";
맥
- "/src/main/resource/static/files";

게시글 작성 메서드인 save는 컨트롤러와 게시글 수정에서도 사용이 된다. save에 매개변수를 추가했으니 컨트롤러와 수정 부분도 수정을 해주겠다.

BoardControll

@PostMapping("/board/write")
public String boardWrite(Board board, Model model, MultipartFile file) 
throws Exception {

    boardService.save(board, file);
    model.addAttribute("message", "글 작성이 완료되었습니다.");
    model.addAttribute("searchUrl", "/board/list");

    return "message'
}

매개 변수 MultipartFile file을 추가했다.

BoardService/update

public void update(Integer id, Board updateBoard, MultipartFile file) 
throws Exception {

    Board board = boardRepository.findById(id).get();
    board.setTitle(updateBoard.getTitle());
    board.setAuthor(updateBoard.getAuthor());
    board.setContent(updateBoard.getContent());

    save(board, file);
}

BoardController/postUpdate

@PostMapping("/board/post/update/{id}")
public String postUpdate(@PathVariable Integer id, Board board, 
Model model, MultipartFile file) throws Exception {

    boardService.update(id, board, file);

    model.addAttribute("message", "게시글 수정이 완료되었습니다.");
    model.addAttribute("searchUrl", "/board/post/" + id);

    return "message";
}