[Youtube 클론코딩] 파일 업로드, Multer 미들웨어, 프로필 사진 수정

파일 업로드를 위해서는 input 태그의 속성을 이용해야 한다.

또, 어디를 눌러도 파일 선택 창이 열릴 수 있도록 label 태그로 감싸주면 좋다.

<label> - HTML: Hypertext Markup Language | MDN (mozilla.org)

<label> - HTML: Hypertext Markup Language | MDN

label을 input요소와 연결하려면, input 요소에 id 값을 넣고 label에는 for요소를 넣은 뒤 두 요소를 같게 만들어 주면 된다.

또는 label 안에 input요소를 집어넣어주면 연결된다.

 

이를 이용해 유저의 프로필을 변경해보자.

edit-profile.pug 수정하기

name은 전송한 파일을 백엔드에서 다룰 때 사용할 이름이고

accept는 전송할 파일의 유형을 지정할 때 사용한다.

<input type="file"> - HTML: Hypertext Markup Language | MDN (mozilla.org)

<input type="file"> - HTML: Hypertext Markup Language | MDN

미들웨어 설치

파일 업로드는 전용 미들웨어의 도움이 필요하다.

multer - npm (npmjs.com)

multer

multer는 파일 업로드에 사용하는 기능들을 모아놓은 미들웨어인데, 몇가지 설정이 필요하다.

 

미들웨어 생성

npm i multer 를 이용해 설치한 뒤, 미들웨어를 만들어주어야 한다.

이미 multer 자체가 미들웨어이므로 uploadFiles라는 변수에 multer를 지정해준다.

넣어주는 옵션들은 위처럼 존재하는데, dest의 경우 전송할 파일이 저장되는 위치를 가리킨다.

저 위치는 루트 경로가 기준이므로, src 폴더 바깥의 루트 경로에 uploads 폴더를 만들어야 한다.

 

미들웨어 사용

이제 이 미들웨어를 사용할 페이지에 미들웨어를 삽입해주면 된다.

이 때 single은 다음처럼 하나의 파일을 전달받는 것을 의미한다.

그리고 fieldname에는 input의 name에 지정한 이름을 써준다.

 

폼 수정

multer는 특수한 방식으로 인코딩 된 폼에서만 작동한다.

form 태그에 enctype속성만 추가해주면 된다.

 

작동 테스트

위의 내용들을 토대로 파일을 업로드 해보면 uploads 폴더에 알수없는 파일 하나가 들어와있다.

이것은 multer가 파일 이름이 중복일 때 덮어쓰는 현상을 방지하기 위해 인코딩 한 파일이며,

인터넷 브라우저에서는 이 파일을 바로 사용할 수 있다.

바로 사용이 되는 모습

프로필 수정 기능 추가하기

이제 업로드 된 파일을 유저 프로필로 사용해보자.

업로드 되는 파일은 다음처럼 req.file 속성에서 접근할 수 있다.

path가 파일의 저장 경로다.

따라서 다음처럼 객체 구조분해를 해준 뒤, 사용하면 된다.

이제 avatarUrl이라는 정보가 생겼으므로, 프로필사진을 띄워보자.

 

현재 edit-profile.pug은 localhost:4000/users/edit 에서 실행이 되므로

img 속성의 src 경로또한 거기서 시작하는 점에 주의해서 설정해야 한다.

 

폴더 접근 설정하기

그런데 여기서 주의할 점은, 브라우저는 서버의 모든 폴더에 접근할 수 있는게 아니다.

접근이 가능하면 보안 문제가 발생하기 때문.

따라서 우리는 브라우저에 제공할 폴더가 무엇들인지를 알려주어야 한다.

Serving static files in Express (expressjs.com)

Serving static files in Express

app.use(url경로, express.static(폴더경로))

즉, 도메인 주소/uploads 에 접근하면 uploads 폴더에 있는 파일들에 접근이 가능해진다.

 

결과

문제점

1. 파일을 서버 자체에 저장하게 되어 서버를 재가동 하면 모두 날아가게 된다.

2. 같은 파일이더라도 여러번 업로드하면 제각각 다른 파일로 저장되는 문제가 발생한다.

 

주의점

파일 자체를 절대 절대 데이터베이스에 저장하면 안된다.

데이터베이스에는 파일의 경로 정보와 같이 텍스트로만 저장이 돼야 한다.