TIL 이미지 업로드

프로젝트는 저번주에 끝났지만 프로젝트가 끝나고 정리하지 못한 I Learn을 작성한다.

 

일단 이미지를 프론트에서 서버로 가져오기 위해선, html에 다음과 같이 선언해준다.

 

<input type="file" name="file" id="file" class="file" value="등록">

type을 file타입으로 하여 file형태로 내 컴퓨터에서 파일을 받아온다.

ajax

Controller에서도 역시 file형태로 받아오고(

 @RequestParam("file") MultipartFile file,

다음과같이 file값을 클라이언트에서 받아온다.

 

그리고 Service

public void createPost(String title, String content, User user, MultipartFile files) throws IOException {
        if (files.isEmpty()) {
            return;
        }
//         원래 파일 이름 추출
        String origName = files.getOriginalFilename();

        // 파일 이름으로 쓸 uuid 생성
        String uuid = UUID.randomUUID().toString();

        // 확장자 추출(ex : .png)
        String extension = origName.substring(origName.lastIndexOf("."));

        // uuid와 확장자 결합
        String savedName = uuid + extension;

        // 파일을 불러올 때 사용할 파일 경로
        String savedPath = uploadPath + savedName;
		
        //해당 경로에 파일 저장
        files.transferTo(new File(savedPath));

		//파일 경로를 가진 postEntity생성
        Post post = new Post(title,content,origName,savedName,savedPath,user);
		
		//db에 저장
        postRepository.save(post);

    }ㅍ

 

해당 서비스가 가능하기 위해선 Spring security에서 권한을 주고, Spring에서 로컬 접근권한을 줘야하는데, config를 이용해 권한을 설정해준다.

uploadPath는 미리 application.properties에서 지정해둔 파일을 저장할 경로이다.

 

@Configuration
public class webConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/Users/iseungchul/img/**")    //이미지호출 URL
                .addResourceLocations("file:/Users/iseungchul/img/");           //실제 이미지가 있는 외부 위치
//                .setCacheControl(CacheControl.maxAge(10, TimeUnit.MINUTES));
    }
}

해당 로컬위치로 접근을 허용한다.

 

.requestMatchers("/Users/iseungchul/img/**").permitAll()

SpringSecurity에서도 해당 경로 접근을 permitAll()

이렇게 해주지 않으면 스프링이 접근하려고 할때 모두 차단해 버린다.

 

출력해 올때는 이미지가 들어갈 자리에 db에서 가지고있는 savedPath를 넣어준다 <img src=savedPath img>