[Thymeleaf] 사진 업로드 기능 구현하기 Front-end , 2편 END

안녕하세요~ 이전 포스트에서는 Spring Boot를 사용하여 백엔드에서 이미지 업로드 기능을 구현하는 방법을 알아보았습니다. 오늘은 프론트엔드에서 이미지를 업로드하기 위한 HTML 폼을 구현하는 방법을 살펴보겠습니다.

HTML 폼 작성

이미지 업로드를 위한 HTML 폼은 다음과 같은 구성 요소를 포함합니다:

1. 이미지 제목 입력 필드
2. 이미지 파일 선택 필드
3. 제출 버튼

HTML 폼 태그에는 enctype="multipart/form-data" 속성을 반드시 포함해야 합니다. 이 속성은 폼 데이터가 파일이나 이미지와 같은 바이너리 데이터를 포함할 수 있도록 지정합니다.

 

코드 예시

<form action="/" method="POST" enctype="multipart/form-data">
    <div class="mb-3">
        <label for="imageTitle" class="form-label">이미지 제목</label>
        <input type="text" class="form-control" id="imageTitle" name="title" required>
    </div>
    <div class="mb-3">
        <label for="imageFile" class="form-label">이미지 파일</label>
        <input type="file" class="form-control" id="imageFile" name="file" required>
    </div>
    <button type="submit" class="btn btn-primary">업로드</button>
</form>

 

중요 요소 설명

• 이미지 제목: 사용자가 이미지에 대한 제목을 입력할 수 있는 텍스트 필드입니다.name="title" 속성을 통해 서버에서 이 데이터를 식별할 수 있습니다.
• 이미지 파일 선택: type="file"을 사용한 입력 필드를 통해 사용자는 자신의 장치에서 이미지 파일을 선택할 수 있습니다. name="file" 속성으로 서버에서 이 파일 데이터를 받습니다.
• 제출 버튼: 사용자가 폼을 제출할 때 사용되는 버튼입니다. 이 버튼을 클릭하면 폼 데이터가 서버로 전송됩니다.

name이 일치해야하는 Back-end 부분은 아래와 같습니다.

@Data
public class CoverUploadDto {
    private MultipartFile file;
    private String title;

    public Cover toEntity(String coverImageUrl) {
        return Cover.builder()
                .coverImageUrl(coverImageUrl)
                .title(title)
                .build();
    }
}

HTML 폼의 'action'과 'method' 속성

• action 속성: 이 속성은 폼 데이터가 서버로 전송될 때 해당 데이터가 도착할 URL을 지정합니다. 이 URL은 서버의 컨트롤러에서 처리하는 엔드포인트와 일치해야 합니다. 예를 들어, 백엔드에서 @PostMapping("/uploadImage") 로 엔드포인트를 설정했다면, HTML 폼의 action은 /uploadImage로 설정해야 합니다. 우리는 @PostMapping("/") 로 설정했기에 action="/" 으로 설정합니다.
• method 속성: method 속성은 폼 데이터를 서버로 전송할 때 사용할 HTTP 메소드를 정의합니다. 이미지와 같은 파일을 업로드할 때는 주로 POST 메소드가 사용됩니다. 이는 서버의 @PostMapping 과 일치해야 합니다.

input 태그의 'required' 속성

• required 속성: 이 속성은 해당 입력 필드가 반드시 채워져야 폼이 제출될 수 있음을 나타냅니다. 사용자가 이 필드를 비워두고 폼을 제출하려고 하면, 브라우저는 사용자에게 해당 필드를 채울 것을 요청하는 메시지를 표시합니다. 예를 들어, 이미지 제목과 파일 선택 필드에 required 속성을 추가하면, 사용자가 이러한 정보를 입력하지 않고는 폼을 제출할 수 없습니다.

결론

이러한 HTML 폼을 사용하면 사용자는 웹 페이지에서 직접 이미지 파일을 업로드할 수 있습니다. 백엔드에서 구현한 이미지 업로드 로직과 결합하여, 이제 사용자가 실제로 웹 애플리케이션을 통해 이미지를 업로드하고 관리할 수 있는 기능을 완성할 수 있습니다.

 

1편은 아래 링크에서 만나실 수 있습니다!
https://developing-mango.tistory.com/59

 

첫 장편포스팅인데 사실 타임리프(템플릿엔진)에 관한것은 없지만 카테고리에 넣었습니다.
긴 글 읽어주셔서 감사합니다~!