사진 업로드 샘플링 1

Apr 19, 2024


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>

[ 화면 확인 ]

form태그는 multipart/form-data ✓

사진 업로드하기

[ 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";
    }

}

See more posts

사진 업로드 샘플링 1

머스태치 쓰려면 (머스태치 라이브러리)

기초 세팅

yml

그림 그리기 - 아주 간단하게 디자인

[ index.mustache ] - 사진 업로드가 되면 이 페이지로 리다이렉션 할 것

[ uploadForm 사진 등록 페이지 ]

[ uploadCheck 사진 확인 페이지 ]

[ 화면 확인 ]

form태그는 multipart/form-data ✓

사진 업로드하기

[ pic 패키지 생성 ]

[ PicController ]

More articles

사진 업로드 샘플링 3 (+UUID 롤링)

사진 업로드 샘플링 2

오류 뜬 것

RestAPI 전환 - users/join, logout