[SpringBoot - 파일 다루기] 2. 업로드한 이미지 파일 웹에서 확인하기

0. 개요

- 이전 포스팅에서 클라이언트가 '이미지 파일'을 업로드 하여, 서버에 저장하는 기능을 구현하였다.

저장된 이미지를 클라이언트가 확인하는 기능이 필요하다는 것을 느꼈다.

따라서, 클라이언트가 자신이 업로드한 '이미지 파일'을 웹상으로 확인하는 기능을 구현하겠다.

 

 

1. 원하는 기능의 모습

1. 이미지 업로드

이미지 제목 : "첫번째 동물사진"
이미지 파일 : "wombat.jpg"

이와 같이 설정하여 '웜벳' 이미지를 업로드 한다.

업로드를 눌러 '이미지 파일' 업로드를 마무리한다.

 

2. 업로드된 '이미지 파일'을 웹에서 확인

이와 같이 업로드한 파일을 즉각적으로 확인할 수 있다.

 

+) 사진을 더 추가한다면?

 

 

2. 기능구현 (코드)

1. "application.yml"에 저장 경로 설정

기존에 설정했던 저장 경로를 유지한다.

 

2. 'Entity', 'Repository', 'Service'는 이전 포스팅과 같이 유지

 

3. 'WebConfig.java' 접근 권한 설정

package study.imageHandlerTest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // HTTP 요청 경로 "/upload/**"를 로컬 디렉터리 "C:/SpringBoot/upload"와 연결
        registry.addResourceHandler("/upload/**")
                .addResourceLocations("file:///C:/SpringBoot/upload/");
    }
}

- SpringBoot 에서 정적 리소스를 처리하기 위해, 정적 리소스 핸들러를 설정하는 클래스

여기서 '정적 리소스'는 '서버 로컬 저장소에 업로드된 이미지 파일'을 의미한다.

 

예를 들어 "example.jpg" 이미지 파일을 업로드 하였다고 가정한다.

이 이미지 파일은 "C:/SpringBoot/upload/example.jpg" 의 서버 로컬 저장소에 위치한다.

 

1. " .addResourceHandler("/upload/**") "

이 부분은 HTTP 요청 경로를 정의한다.

" /upload/** " 의 HTTP 요청은 "http://localhost:8080/upload/" 와 같이 나타낼 수 있는데,

"example.jpg" 이미지 파일을 요청하기 위해선,  "http://localhost:8080/upload/example.jpg" 로 할수있다.

 

2. " .addResourceLocations("file:///C:/SpringBoot/upload/") "

이 부분은 로컬 파일 시스템 경로를 정의한다.

요청된 경로 " /upload/** "가 실제 어디에서 파일을 찾아야 하는지 지정한다.

 

HTTP 요청 : "http://localhost:8080/upload/example.jpg"

로컬 파일 시스템 경로에 존재하는 파일 반환 : "C:/SpringBoot/upload/example.jpg"

 

즉, 위 코드는 HTTP 요청 경로 " /upload/** " 와 로컬 디렉토리 "C:/SpringBoot/upload"를 매핑해주는 역할을 수행한다. 

 

 

4. 'MainController.java'

@GetMapping("/")
public String index(Model model) {
    model.addAttribute("list", imageService.findAll());
    model.addAttribute("uploadPath", "/upload/");
    return "index";
}

 

5. 'index.html'

 

 

3. 작동확인

 

업로드된 파일을 웹상에서 확인 가능한 것을 볼 수 있다.

 

---

- 시리즈 포스팅 확인하기

[SpringBoot - 파일 다루기] 1. 이미지 파일 업로드 및 저장하기

https://notorious.tistory.com/422

[SpringBoot - 파일 다루기] 1. 이미지 파일 업로드 및 저장하기

 

[SpringBoot - 파일 다루기] 3. 동영상 파일(MP4) 다루기

https://notorious.tistory.com/424

[SpringBoot - 파일 다루기] 3. 동영상 파일(MP4) 다루기

 

 

[SpringBoot - 파일 다루기] 4. 기존 게시판 프로젝트에 '파일 업로드' 기능 추가하기 (완)

https://notorious.tistory.com/425