[Node+AWS]이미지 업로드 기능2 (multer 설치 및 셋팅)

우선 이번에는..

1. write페이지에 이미지넣기 input태그 추가
2. 서버에서는 받은 이미지 S3에 저장
3. 이미지 URL을 DB에 글이랑 함께 보관
4. 에러 및 예외처리

참고로 S3에 있던 이미지를 html로 보여주기 위해서는
이미지 저장시에 발급받은 URL을 DB에 보관해두고,
필요한 때에 img태그로 넣어주는 방법이 있다.

해보자!!!!!!

✨multer 설치 및 셋팅

1. 터미널에 npm install multer multer-s3 @aws-sdk/client-s3 입력후 설치
   

2. 아래 코드 필요한부분 수정해서 server.js 상단에 넣어준다

const { S3Client } = require('@aws-sdk/client-s3')
const multer = require('multer')
const multerS3 = require('multer-s3')
const s3 = new S3Client({
  region : 'ap-northeast-2',	//지역 및 나라이름(현재는 서울)
  credentials : {
      accessKeyId : 'IAM에서 발급받은 액세스키',
      secretAccessKey : 'IAM에서 발급받은 시크릿키'
  }
})

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: '님들버킷이름',
    key: function (요청, file, cb) {
      cb(null, Date.now().toString()) //업로드시 파일명 변경가능
    }
  })
})

파일명은 겹치면 안되기때문에 Date를 사용!

이까지 하면 upload.single('input명')함수 실행하면 S3에 업로드를 시킬 수 있다!

1. write.ejs페이지에 type이 file인 input태그를 추가하며,
   이미지 업로드에 필요한 부분들을 추가해줬다.
   form태그에는 enctype="multipart/form-data"추가,
   input 추가하며 type="file" name="img1" accept="image/*"넣어주기
   

2. 이제 앞에서 말했던 upload.single함수를 실행하여 테스트해보자.
   현재 글 작성 후 전송 버튼을 누르면 /add로 post요청이 되는데,
   해당 코드를 찾아 미들웨어로 함수를 넣어주자.
   
   이렇게 작성할 경우, name="img1"을 가진 이미지가 들어오면 자동으로 S3에 업로드를 해줄 것!
   업로드가 완료되면, 이미지의 URL을 생성해주는데,
   요청.file을 콘솔창에 찍어 URL도 확인해보자~
   
   파일넣고 전송 누른 뒤에 확인해보면
   
   잘 들어간다.

콘솔도 확인해보면

이렇게 찍혀있는데, 저 location을 보면 이미지 경로가 나와있다.
img src로 이미지를 갖다써도 무방하고, 요청.file.location으로 편안~하게 사용할 수 있게 되었다^^

3. 뽑아낸 이미지 URL을 DB에 글이랑 함께 저장해주면 된다..
   

테스트는 잘 들어간다!

✨이미지 여러장 업로드

이미지를 여러장 업로드 하고싶은 경우,

1. 우선 ejs파일에 있던 이미지 input태그에 multiple추가
   

2. server.js에서 사용했던 upload.single대신,
   upload.array('input명', 개수)를 사용.
   또한, 요청.file이 아니라 요청.files를 사용해줘야 한다.
   

상세 페이지에서 DB에 있던 이미지도 함께 꺼내서 보여주기!

우선 detail.ejs에

img태그를 추가하고 src로 이미지를 넣어주었다.
사이즈가 너무 커서 style로 250px을 맞춰주니,

잘 뜬다.

이미지 업로드시 에러처리 하는 방법

간단하게 하기 위해서는 미들웨어를 사용하지 않고

이렇게 에러가 발생하는 경우에만 if문으로 잡아내어 처리할 수 있다.