Express :: 게시글작성(이미지 업로드하기)

사진을 추가하고 글을 작성하여,

게시글을 작성하는 코드를 만들어보자.

 

---

 

폼전송방법은 크게 두가지가 있다.

 

1. 글쓰고 이미지 업로드를 누르면 바로 서버로 정보가 전달된다.

예를들면 멀티파서형식으로 { content: '안녕', image: 01010011110 } 이런식의 데이터가 서버에 저장된다.

 

백엔드를 간단하게 구축할 수 있지만,

한번에 올려주는 것이기 때문에 이미지 미리보기를 처리하기가 애매하다.

또한 컨텐츠를 업로드하고나서야 이미지리사이징, 머신작업을 할 수 있으므로,

업로드 시간이 오래걸린다.

 

2. 이미지를 서버로 보내고, 프론트에서 파일명을 받아오고, 한번더 서버로 보낸다.

첫번째 보낼땐 이미지만 데이터로 보낸다. ex. image: 0101000111010 

그 후 백엔드에서 브라우저로 파일명을 리턴해준다  ex. [비오.png, 수피오.png]

그리고 프론트에서 미리보기로 이미지를 표시하고, 리사이징해준다.

사람들이 그 동안 content를 작성하고, 작성완료를 누르면 content를 서버로 보낸다.

 

 

이미지미리보기를 좀더 쉽게 구현할 수 있는

2번 방법을 사용해서 코드를 짜보자.

 

먼저 파일업로드를 구성하고,

그 다음으로 submit을 할 때 게시글이 작성되도록 만들자.

 

---

파일업로드

dispatch/ Input의 onChange

FormData를 사용하면 multipart 형식으로 서버에 보낼 수 있다.

  ImageFormData.append(key, file);  

여기에 있는 key랑 multer미들웨어의 key가 일치해야 값을 받을 수 있다.

 

FormData를 콘솔에 찍어보면 다음과같은 정보가 들어있는 것을 확인할 수 있다.

이 데이터를 dispatch하여 서버로 보내준다.

 

route/ multer

multer 설정

multer 적용

  upload.array(key)  

 

---

 

하지만 미리보기가 제대로 작동하지않고 오류가 발생한다.

그 이유는 파일은 서버(localhost:3065)에 저장되는데,

미리보기의 파일 주소는 프론트(localhost:3060)이기 때문이다.

이미지의 파일 주소를 서버주소로 바꿔주자.

 

백엔드에서도 주소를 설정해야한다.

express의 static이라는 미들웨어를 사용하여 주소를 설정해주자.

__dirname = 디렉토리네임(현재폴더)

__dirname + '/uploads' 이런형태로 사용하지않고, path.join(__dirname, 'uploads')라고 사용하는 이유는

운영체재별로 경로구분자가 다르기때문이다.

(윈도우는 \, 맥이랑 리눅스는 / 이다.)

운영체제에 맞게 자동으로 설정하도록 위와같이 설정해준다.

 

첫번째 인자는 슬래쉬경로이다.

'/'인 경우, 슬래쉬 경로가 localhost:3065가 됨.

 

'/images' 라고쓰면

슬래쉬경로는 localhost:3065/images가 됨.

그럴땐 프론트에서도 똑같이 images를 추가해주어야함.

 

이런식으로 코드를 작성하면 서버의 폴더구조가 드러나지 않기 때문에 보안에 유리하다.

 

 

---

게시글 작성

 

dispatch

multer을 연습하기위해 이 데이터도 FormData로 보내주자.

파일(혹은 이미지)가 아닌데 form data를 사용하는 것은 비효율적이다.

즉 지금 이 방법은 비효율적인 방법이지만 서버에서 multer 연습을 해보자.

^)^

 

route

multer도 파일인 경우에는 req.files(array), req.file(single)이 된다.

하지만 나머지의 경우에는 req.body에 넣어준다.

 

아까 이미지미리보기를 위해 이미지를 서버로 보내줄 때,

다시 프론트로 이미지주소만 가지고 왔으므로,

여기서 서버에서 받는 데이터는 content와 이미지주소이다.

그러므로 req.body.image나 req.body.content에 데이터가 전달된다.

 

 

** 이미지를 직접 DB에 올리면 캐싱할 수 없다.

파일은 클라우드에 올려서 CDN캐싱을 적용하고,

DB는 그냥 파일에 접근할 수 있는 주소만 가지고 있게 만든다.