[Springboot] 게시판따라하기(6) - 게시판 파일업로드 ✔정리

728x90

원본 영상 링크:

https://www.youtube.com/watch?v=Y7S1xXsKy_w&list=PLZzruF3-_clsWF2aULPsUPomgolJ-idGJ&index=8

entity > testboard.java

package com.example.demo.entity;


import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;


@Entity //엔티티는 아래 클래스가 DB에 있는 테이블을 의미한다는걸 의미
@Data
public class testboard {
    @Id                             //오라클 -mysql은 identity임
    @GeneratedValue(strategy = GenerationType.SEQUENCE)
    private Integer id;
    private String title;
    private String content;
    private String filename;//파일이름
    private String filepath;//파일경로
}

테이블에 filename과 filepath 를 추가해준다.

templates > boardwrite.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>게시물작성폼</title>
</head>

<style>
    .layout{
        width : 500px;
        margin : 0 auto;
        margin-top: 40px;
    } /*layout 하위에 있는 input태그 스타일 설정*/
    .layout input{
        width: 100%;
        box-sizing: border-box;
    }
    .layout textarea{
        width: 100%;
        margin-top: 10px;
        min-height: 300px;
    }
</style>


<body>
    <div class="layout">                                <!--form-data추가-->
        <form action="/board/writepro" method="post" enctype="multipart/form-data">
            <input name="title" type="text">
            <textarea name="content"></textarea>
            <!--파일 선택추가-->
            <input type="file" name="file"> <!--name이름을 controller의 매개변수 이름과 동일하게 설정-->
            <button type="submit">작성</button>
        </form>
    </div>
</body>
</html>

form 태그에 entype="multipart/form-data" 추가

<input type = file name = file> ←파일 선택해서 추가할수있는 버튼 생성

service > BoardService.java

package com.example.demo.service;

import com.example.demo.entity.testboard;
import com.example.demo.repository.BoardRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.ui.Model;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;//추가
import java.util.List;
import java.util.UUID;

@Service
public class BoardService {

    @Autowired //new를 써야하지만, 스프링부트가 알아서 읽어와서 주입을해준다.
    private BoardRepository boardRepository;

    //글작성처리
    /*MultipartFile file 추가*//*예외처리*/
    public void write(testboard board , MultipartFile file) throws Exception{
        /*우리의 프로젝트경로를 담아주게 된다 - 저장할 경로를 지정*/
        String projectPath = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\files";

        /*식별자 . 랜덤으로 이름 만들어줌*/
        UUID uuid = UUID.randomUUID();

        /*랜덤식별자_원래파일이름 = 저장될 파일이름 지정*/
        String fileName = uuid + "_" + file.getOriginalFilename();

        /*빈 껍데기 생성*/
        /*File을 생성할건데, 이름은 "name" 으로할거고, projectPath 라는 경로에 담긴다는 뜻*/
        File saveFile = new File(projectPath, fileName);

        file.transferTo(saveFile);

        /*디비에 파일 넣기*/
        board.setFilename(fileName);
        /*저장되는 경로*/
        board.setFilepath("/files/" + fileName); /*저장된파일의이름,저장된파일의경로*/
        
        /*파일 저장*/
        boardRepository.save(board);
    }

    //게시글리스트처리
    public List<testboard> boardList(){
        //findAll : 테스트보드라는 클래스가 담긴 List를 반환하는것을 확인할수있다
        return boardRepository.findAll();
    }

    //특정 게시글 불러오기
    public testboard boardview(Integer id){
        return boardRepository.findById(id).get(); //어떤게시글을 불러올지 지정을해주어야한다 (Integer값으로)
    }

    //특정게시글삭제
    public void boardDelete(Integer id){ /*id값 1번을 넣어주면 1번을 삭제한다*/
        boardRepository.deleteById(id);
    }

}

*MultipartFile file 추가, *예외처리
public void write(testboard board , MultipartFile file) throws Exception{

*우리의 프로젝트경로를 담아주게 된다 - 저장할 경로를 지정
String projectPath = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\files";

*식별자 . 랜덤으로 이름 만들어줌
UUID uuid = UUID.randomUUID();

*랜덤식별자_원래파일이름 = 저장될 파일이름 지정
String fileName = uuid + "_" + file.getOriginalFilename();

*빈 껍데기 생성 - File을 생성할건데, 이름은 "name" 으로할거고, projectPath 라는 경로에 담긴다는 뜻
File saveFile = new File(projectPath, fileName);

file.transferTo(saveFile); boardRepository.save(board);

board.setFilename(fileName); *디비에 파일 넣기
board.setFilepath("/files/" + fileName); *저장된파일의이름,저장된파일의경로

controller > BoardController.java

package com.example.demo.contoller;


import com.example.demo.entity.testboard;
import com.example.demo.service.BoardService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

/*shift + f10 재실행*/
@Controller
public class BoardContoller {

    @Autowired
    private BoardService boardService;

    @GetMapping("/board/write") //어떤 url로 접근할 것인지 정해주는 어노테이션 //localhost:8080/board/write
    public String boardWriteForm() {
        return "boardwrite";
    }

    //여기에도 MultipartFile file 받아줌 //예외처리
    @PostMapping("/board/writepro")
    public String boardWritePro(testboard board, Model model, MultipartFile file)throws Exception{

        boardService.write(board, file);

        //메세지띄우기2
        model.addAttribute("message","글작성이 완료되었습니다");
        model.addAttribute("searchUrl","/board/list");

        return "message";
    }

    @GetMapping("/board/list")
    public String boardList(Model model){
        //BoardService에서 만들어준 boardList가 반환되는데, list라는 이름으로 받아서 넘기겠다는 뜻
        model.addAttribute("list" , boardService.boardList()); //4번
        return "boardList";
    }

    @GetMapping("/board/view") //localhost:8080/board/view?id=1 //(get방식 파라미터)
    public String boardView(Model model, Integer id){
        model.addAttribute("testboard", boardService.boardview(id));
        return "boardview";
    }

    @GetMapping("/board/delete")
    public String boardDelete(Integer id){

        boardService.boardDelete(id);
        //게시물삭제하고 게시물리스트로 넘어가야하므로
        return "redirect:/board/list";
    }

    //PathVariable이라는 것은 modify 뒤에있는 {id}부분이 인식이되서 Integer형태의 id로 들어온다는것
    @GetMapping("/board/modify/{id}")
    public String boardModify(@PathVariable("id") Integer id, Model model){

        //상세페이지에 있는 내용과, 수정페이지의 내용이 같기때문에 위 코드와 같은 것을 확인할수있다
        model.addAttribute("testboard", boardService.boardview(id));

        return "boardmodify";
    }

    //수정부분에도 MultipartFile 와 throw IOEException 추가
    @PostMapping("/board/update/{id}")
    public String boardUpdate(@PathVariable("id") Integer id, testboard board, MultipartFile file)throws Exception {
        //기존에있던글이 담겨져서온다.
        testboard boardTemp = boardService.boardview(id);

        //기존에있던 내용을 새로운 내용으로 덮어씌운다.
        boardTemp.setTitle(board.getTitle());
        boardTemp.setContent(board.getContent());

        boardService.write(boardTemp, file); //추가 → 수정한내용을 boardService의 write부분에 넣기

        return "redirect:/board/list";
    }


}

여기에도 MultipartFile file 받아줌 예외처리
@PostMapping("/board/writepro")
public String boardWritePro(testboard board, Model model, MultipartFile file)throws Exception{
boardService.write(board, file);
model.addAttribute("message","글작성이 완료되었습니다");
model.addAttribute("searchUrl","/board/list"); return "message"; }

수정부분에도 MultipartFile 와 throw IOEException 추가
@PostMapping("/board/update/{id}")
public String boardUpdate(@PathVariable("id") Integer id, testboard board, MultipartFile file)throws Exception {

testboard boardTemp = boardService.boardview(id);
boardTemp.setTitle(board.getTitle()); boardTemp.setContent(board.getContent());
boardService.write(boardTemp, file);
"redirect:/board/list";

templates > boardview.html

<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>게시글상세페이지</title>
</head>
<body>

<h1 th:text="${testboard.title}">제목입니다</h1>
<p th:text="${testboard.content}">내용이들어갈부분입니다</p>
<a th:href="@{/board/delete(id=${testboard.id})}">글삭제</a>
<a th:href="@{${testboard.filepath}}">다운받기</a>
<a th:href="@{/board/modify/{id}(id = ${testboard.id})}">수정</a>
<!--th:href a태그에 경로를 걸때 사용-->
<!--th:text 태그에 문자열을 출력할때사용-->
</body>
</html>

th:href a태그에 경로를 걸때 사용
th:text 태그에 문자열을 출력할때사용

board/write

에서 글을 쓰고, 파일을 선택한 후

작성버튼을 누르면 업로드완료

DB에 filename과 filepath에 데이터가 들어간것을 확인할수있다.

board/list에서 업로드한 게시글을 선택한 후

상세에서 다운받기를 눌러보면

업로드한 이미지가 화면에 나오는것을 확인할수있다.

728x90

'STUDY > SpringBoot' 카테고리의 다른 글

[Springboot] 게시판따라하기(7) - 게시판 페이징처리 ✔정리 (0)	2022.08.10
[SpringBoot] 22-08-10 스프링부트 설정 설명 ☑ (0)	2022.08.10
[StringBoot] Thymeleaf 사용법 정리✔ (0)	2022.08.10
[Springboot] 게시판따라하기(5) - 메세지 띄우기 ✔정리 (0)	2022.08.09
[Springboot] 게시판따라하기(4) - 게시글 삭제·수정 ✔정리 (0)	2022.08.09

'STUDY > SpringBoot' 카테고리의 다른 글

티스토리툴바