이미지 업로드 & 이미지 서버 만들기

이미지 업로드기능을 만들어보자. upload.ejs라는 폴더를 만들고,

<div class="container mt-4">
        <h4 class="text-center mb-3">업로드페이지</h4>

        <form action="/upload" method="POST" enctype="multipart/form-data">
             // enctype="application/x-www-form-urlencoded"얘는 인코딩이 된 형식으로 보낼거냐 
             //근데 보통은 multipart/form-data 인코딩하지말고 그대로 전송함
            <input type="file" name="프로필">
            <button type="submit">전송</button>
        </form>
 </div>

form태그를 이용해서 업로드하는 곳을 만들어준다. input태그에 type을 file로 하면 이미지를 업로드할 수 있다.

그리고, server.js에 get요청을 해준다.

app.get('/upload', function(요청, 응답) {
    응답.render('upload.ejs')
})

/upload에 들어가면 upload.ejs파일을 불러오게끔 해준다.

이제 업로드는 할 수 있는데 업로드한 이미지를 저장해야한다.

보통은 작업폴더안에 저장한다. DB에 저장하는 것보다 일반하드에 저장하는게 싸고 편하기 때문이다.

그러므로, public폴더에 image폴더를 만들어서 저장하면 다 이곳으로 오게해보자.

좀 더 쉽게 하려면 파일전송을 쉽게 도와주는 라이브러리를 설치해준다.

npm install multer

그리곤 multer를 사용해보자.

let multer = require('multer');
var storage = multer.diskStorage({
//diskStorage는 이미지를 어디다가 저장할지 정의하는 함수 하드에저장해주세요임 memoryStorage는 램에다가 저장
    destination : function(req, file, cb){
        cb(null, './public/image') //이미지 저장을 어디로보낼지 정의
      },
      filename : function(req, file, cb){
        cb(null, file.originalname ) //저장한 이미지의 파일명을 설정하는 부분
      }
});

var upload = multer({storage : storage})//이제 이미지 업로드 시 multer을 동작시키면 됨


app.get('/upload', function(요청, 응답) {
    응답.render('upload.ejs')
})

app.post('/upload', upload.single('프로필'), function(요청, 응답) {
    응답.send('업로드완료')
})

multer라는 변수로 require해서 불러오고, 하드에 어떤 파일경로로 어떤이름으로 저장해줄지 multer의 사용법에 따라 적어준 다음, upload라는 변수에 담아주고 upload를 미들웨어 처럼 사용하면 된다.

upload를 사용할 때 single('input의 name속성이름')을 꼭 적어줘야한다.

 

그러면 파일이 잘 업로드 된다. 만약, 파일을 여러개 업로드하고 싶으면 single이 아닌 array를 적어줘야한다.

upload.array('프로필',10)

이렇게 array를 적어주고, 한번에 받을 최대 갯수를 적어준다. 그리고 html도 여러파일을 선택할 수 있게 변경해주어야 한다.

 

만약, 파일명을 바꾸고 싶다면 file.originalname + '날짜' 이렇게 날짜를 더해줘도 된다.

그리고 filefilter을 이용해 필터도 할 수 있다.

filefiter : function(req, file, cb){//파일 형식 (확장자) 거르기
        var ext = path.extname(file.originalname);
        if(ext !== '.png' && ext !== '.jpg' && ext !== '.jpeg') {
            return callback(new Error('PNG, JPG만 업로드하세요'))
        }
        callback(null, true)
},
limits : {
        fileSize: 1024 * 1024
}

이렇게, 확장자를 거를 수 있고, limits를 이용해 파일크기에 제한을 걸 수 있다.

 

이제, 업로드한 이미지를 보여주는 기능을 만들어보자

app.get('/image/:imageName', function(요청, 응답){//누군가 /어쩌구로 접속하면 어쩌구.jpg보내줌
    응답.sendFile(__dirname + '/public/image/' + 요청.params.imageName)
})

이렇게 주소를 들어가면 params문법을 이용해 들어간 주소의 이름을 sendFile문법에 입력되도록 적어주면 이미지를 보여주게 된다. 그럼 이제,

<img src="/image/이미지이름">

이렇게 적어주면 이미지가 보이게 된다.