1.파일의 저장된 경로, 파일의이름을 저장하기 위한 컬럼이 필요하다.
2.워크벤처로 가서 2가지를 추가하고 apply버튼을누른다.
db테이블의 정보가 바뀌면 entity도 바꿔줘야한다.
-
인텔리제이의 entity 코드를 수정한다.
-
화면
기존코드
<form action="/board/writepro" method="post">
<input name="title" type="text">
<textarea name="content"></textarea>
<button type="submit">작성</button>
<!-- 이 버튼의 역할은 데이터를 전송하는 역할을 한다. type=submit-->
<!-- 이 버튼을 누를시 폼안에 있는 input과 textarea가 board/writedo로 넘어가게된다.-->
</form>
파일처리하기위해 enctype을 추가해준다.
enctype="multipart/form-data"파일을 첨부하기 위한 코드
<input type="file">- 수정 후 서버 재실행 하면
버튼이 생성되고 파일을 업로드 할 수 있다.
하지만 작성버튼을 눌러도 백엔드 단에서 설정해주지 않았기 때문에 코드를 추가해줘야한다.
6.다시 인텔리제이로 돌아가 파일을 저장할 디렉토리를 하나 만들어준다.
7. 그리고 서비스 패키지에 글작성부분에 파일을 받을 수 있도록 코드를 추가한다.
기존 코드
//글 작성 처리
public void write(Board board){
boardRepository.save(board);
}//글 작성 처리
public void write(Board board, MultipartFile file){
String projectPath = System.getProperty("user.dir");
boardRepository.save(board);
}이렇게 작성하면 projectPath에 프로젝트경로가 담긴다.
File savefile = new File("projectPath", name);파일을 생성하는데 경로를 넣어줄거고, 이름은 이렇게 담긴다는 뜻이다.
public void write(Board board, MultipartFile file){
String projectPath = System.getProperty("user.dir") +"\\src\\main\\resources\\statoc\\files";
File savefile = new File(projectPath,"name");
file.transferTo(saveFile);
boardRepository.save(board);
}
MultipartFile file여기서 들어온 file을 넣어줄 File savefile이라는 클래스를 생성해서
new File(projectPath,"name");경로를 지정해주고 파일의 이름을name으로 지정해준다.
name이라고 할수 없으니 코드 추가
UUID uuid = UUID.randomUUID();
String fileName = uuid +"_" + file.getOriginalFilename();식별자라고, 랜덤으로 아이디를 만들 수 있다.
식별자를 붙이고 + _ 언더바 붙이고 + 원래 파일이름 이 붙게된다.
File savefile = new File(projectPath,fileName);그걸 여기에 붙여주면 된다.
결론: 저장할 경로를 projectPath에 저장하고, 파일 이름에 붙일 랜덤이름을 생성하고,그 랜덤이름을 파일네임 앞에 붙이고 _ 붙이고 원래들어온 파일이름을 뒤에 붙여서 저장될 파일이름을 생성하는것이다.
8.컨트롤러
@PostMapping("/board/writepro")
public String boardWritePro(Board board, Model model, MultipartFile file) {
boardService.write(board, file);
model.addAttribute("message", "글 작성이 완료되었습니다.");
model.addAttribute("searchUrl", "/board/list");
return "message";
}매개변수로 파일을 받을 수 있도록 수정
수정 부분에도 똑같이 오류가 있으므로 수정
-
파일 첨부후 서버 재실행하면 java.lang.NullPointerException: null
-
화면에 받는것이 없음
name으로 파일을 받음 이는 컨트롤러에서 받는file 매개변수 이름이 일치해야한다.
11.이번에는 uuid에 브레이크 포인트 걸려서 랜덤으로받아오는 것을 볼 수 있다.
12.워크벤처에는 null로 들어갔다.
private String filename;
private String filepath;entity에 이러한 내용이 있기때문에
board.setFilename(fileName);
board.setFilepath("/files/"+fileName);
을 작성할 수 있다.
저장되는경로는 서버에서 접근할때는 static 밑에있는 부분은 아래경로로만 접근이 가능하다.
-
이제 filename과 경로가 db에 잘 들어간 것을 확인할 수 있다.
-
업로드한 이미지를 보는방법
th:href -> a태그에 경로를 걸 때 사용
th:text -> 태그에문자열을 출력할 때 사용<a th:href="@{${board.filepath}}"></a>
```변수임으로 $로 감싼다.
filepath -> db에 저장된 경로
이버튼으로 사진을 크게 볼 수 있다.
