이미지 업로드 및 조회 API 개발 1편

최근 웹이나 앱을 보면 이미지 업로드 및 조회 기능은 웬만하면 다 들어가는 필수 요소인 거 같다.

나도 프로젝트 진행하면서 기능이 필요해서 만들어 보려고 한다.(테스트는 PostMan 사용)

 

1편에서 포스트맨 설정 및 업로드 기능 만들고 2편에서 조회 기능을 만들 것이다.

 

기능을 개발하면서 많은 애를 먹어서(포스트맨 설정, 컨트롤러 부분 등..) 이 글을 보고 조금이나마 도움이 되었으면 한다.(ㅠㅠ 처음 해보는 거라 애먹었음) 😓😓 

 

1. 포스트맨에서 파일 및 데이터 보내기

 - 파일 전송 설정

 나는 리뷰 기능을 만들고 있어서 리뷰 내용(data)과 리뷰 사진들을 같이 Request 하려고 한다. 파일 전송부터 보자.

1. Body 선택 -> form-data를 클릭한다.(그림 1)
2. Key 부분에 text or File을 선택한다.(그림 2)
3. File을 선택하면 value 부분에 select Files가 뜨게 되고 파일을 선택하면 된다(그림 3)

 

파일 전송 설정 완료!!

 

그림 1 - 파일 보내기 설정

 

그림 2 - Text or FIle 설정

 

그림 3 - 파일 선택 완료

 

 - data 설정

data를 보내려면 그림 4와 같이 value부분에 전송할 data를 json형식으로 보내줘야 한다. 그리고 Content Type을 설정해줘야 하는데 Content Type을 설정하려면 그림 5를 보면 빨간색 테투리 부분을 클릭하면 체크할 수 있는 항목이 뜨게 된다. Content Type을 체크한다.

 

그림 4 - data value 설정

 

그림 5 - CONTENT TYPE 설정

체크까지 완료되면 그림 6처럼 CONTENT TYPE에 application/json을 설정한다.

여기까지 설정하였으면 포스트매에서 파일 및 데이터 전송을 위한 설정은 끝났다!! 😋😋

나는 그림 7처럼 설정을 완료하였다.

 

그림 6

 

그림 7

---

2. 이미지 업로드 기능 개발

 - Controller 설정

 Controller부분에서 이미지를 받을 때 List <MultipartFile>을 사용하여 이미지를 받는다.

그리고 이미지와 data 받을 때 @RequestPart을 사용해서 파라미터를 받는 반면에, pt-Id는 @RequestParam을 사용해서 받고 있다. pt-id도 @RequestPart를 사용해서 받아봤는데 content type 'application/octet-stream' not supported 오류가 발생하게 되어서 pt-id는 @RequestParam을 사용해서 테스트 해봤는데 제대로 받아졌다.

@RequestPart를 알기 전에 파일은 @RequestParam 사용, 데이터는 @RequestBody 등 여러 방법으로 테스트를 진행하였는데 다 잘 안되었다. 그래서 구글링 해서 찾아보니 "multipart/form-data" 요청을 받기 위해 @RequestPart를 사용해야 한다는 것을 알게 되었다.)

 

그림 8 - Controller 코드

 - FileUpload 로직

 아래는 파일을 저장하는 로직이다. 해당 로직에서 중요한 부분은 파일을 저장장치에 저장하고 DB에는 파일 저장 경로, 크기 등 필요한 정보를 저장한다. 그리고 파일을 저장할 때 파일 이름 암호화 + random함수를 사용하여 파일 이름 중복 방지를 한다.(동일한 파일이 서버에 올라가면 덮어쓰기 돼서 기존 데이터가 사라질 수 있다)

 

내 경우는 리뷰에 올라가는 파일들이라 리뷰 - 파일(1:N)관계를 가지게 되어 @OnetoMany로 연관관계를 가지고 파일들을 엔티티로 관리하였다.

 

그 외 크게 어려운 부분은 없으며 주석 보면서 참고하면 된다.

 

그림 9 - 파일 업로드 로직

 - 테스트

포스트맨을 활용하여 파일 업로드가 잘 되었는지 확인해보자.

아래 그림 10을 보면 리뷰 내용 + 파일들이 잘 저장되었는것을 확인할 수 있다.

파일인 경우 파일을 다운받아 볼 수 있는 URI를 제공하여 프론트에서 처리할 수 있게 하였다.

 

그림 10 - postman 테스트

 

 

글이 길면 읽기 힘드니까 2편에서 계속...