이미지 업로드 하는 방법에 대해서 배워보자
이미지 업로드 할 수 있는 페이지 만들기
upload.ejs 라는 파일명으로 view 를 하나 만들어줬다.
enctype은 서버로 폼 전송하는 방식이다.
- enctype을 multipart/form-data 로 설정할 경우 인코딩하지 않고 그대로 전송한다는 의미이다.
- application/x-www-form-urlencoded 으로 설정하는 경우 base64라는 인코딩형식으로 인코딩되어서 전달됨.
일단 업로드 페이지는 위와같이 마련했다.
upload페이지를 렌더링해주는 GET api를 만들어봤다.
/upload 경로로 get 요청을 보내면 upload.ejs 를 렌더링 해줄거다.
업로드한 이미지를 하드에 저장
라이브러리를 하나 설치해준다.
npm install multer
server.js 는 아래와 같이 작성한다.
모듈 사용법이라 사용법대로 쓰기만하면 된다.
- diskStorage 라는 함수를 쓰면 업로드된 파일을 하드에 저장할 수 있다.
- memoryStorage 를 쓰면 하드가 아닌 램에 저장한다(휘발성이다)
- destination 은 업로드된 파일을 어느 경로에 저장할지 설정하는 부분이다.
- filename 은 저장한 이미지의 파일명을 설정하는 부분이다. file.originalname 이라고 하면 원본 그대로 저장하지만 newDate() 등으로 날짜를 덧붙여서 저장할수도 있겠다.(유니크 하도록)
- limits 등으로 업로드할 파일에 제한을 걸 수도 있다(사이즈 제한 등)
그리고 유저가 post 요청을 하면 이미지가 전송되도록 api를 만들었다.
upload.single('input의 name 속성') 을 실행시키면 된다.
나는 input의 name 속성을 'profile' 이라고 이름 지어보았다.
업로드 페이지에서 form 의 name 속성을 'profile' 이라고 해줬다.
전송버튼도 만들어줬다.
파일을 업로드 하고 전송 버튼을 눌러주면 오른쪽 처럼 업로드 완료라고 성공화면이 뜬다.
실제로 하드(public/image 폴더)에 들어가서 확인을 해보면
잘 전송되어 저장된 것을 확인할 수 있다.
public/image 폴더에 들어가 있는 이미지를 get 요청하는 api도 만들어봤다.
경로에 image 의 파일명을 적으면 되도록 했다.
이미지가 get 요청으로 잘 불러와지는 것을 확인할 수 있었다.
아마존 같은 클라우드 서비스에서 하드를 구매해 사용할 수도 있겠다.
과정은 다음과 같다.
- 유저가 사진을 업로드하면 서버가 이미지 저장 요청을 받는다.
- 아마존에서 제공하는 예제코드를 실행해서 아마존 하드에 저장한다
- 저장이 성공하면 아마존에서 이미지 url을 보낸다.
- 이 이미지 url을 DB에 저장한다.
- 이미지 보여주기를 구현할때에는 url을 DB에서 불러온다(프론트에선 <img>태그 이용)
