https://github.com/kdit-2024/spring-fileupload
머스태치 쓰려면 (머스태치 라이브러리)
implementation 'org.springframework.boot:spring-boot-starter-mustache'
기초 세팅
yml
server: servlet: encoding: charset: utf-8 force: true spring: mustache: servlet: expose-session-attributes: true expose-request-attributes: true datasource: driver-class-name: org.h2.Driver url: jdbc:h2:mem:test;MODE=MySQL username: sa password: h2: console: enabled: true jpa: hibernate: ddl-auto: create show-sql: true properties: hibernate: format_sql: true
그림 그리기 - 아주 간단하게 디자인
[ index.mustache ] - 사진 업로드가 되면 이 페이지로 리다이렉션 할 것
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>메인페이지</h1> <hr> <ul> <li> <a href="/">메인페이지</a> </li> <li> <a href="/uploadForm">사진 등록 페이지</a> </li> <li> <a href="/uploadCheck">사진 확인 페이지</a> </li> </ul> </body> </html>
ul 링크.. 네이게이션이 있어야 한다!
[ uploadForm 사진 등록 페이지 ]
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>사진등록페이지</h1> <hr> <ul> <li> <a href="/">메인페이지</a> </li> <li> <a href="/uploadForm">사진 등록 페이지</a> </li> <li> <a href="/uploadCheck">사진 확인 페이지</a> </li> </ul> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="text" name="title" placeholder="사진제목..."> <input type="file" name="imgFile"> <button>사진업로드</button> </form> </body> </html>
[ uploadCheck 사진 확인 페이지 ]
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>사진확인페이지</h1> <hr> <ul> <li> <a href="/">메인페이지</a> </li> <li> <a href="/uploadForm">사진 등록 페이지</a> </li> <li> <a href="/uploadCheck">사진 확인 페이지</a> </li> </ul> <img src="#" width="500" height="500" alt="사진없음"> </body> </html>
[ 화면 확인 ]
사진 업로드하기
[ pic 패키지 생성 ]
[ PicController ]
package com.mtcoding.fileapp.pic; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class PicController { @GetMapping("/") public String index() { return "index"; } @GetMapping("/uploadForm") public String uploadForm() { return "uploadForm"; } @GetMapping("/uploadCheck") public String uploadCheck() { return "uploadCheck"; } }
Share article
