ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • npm library - multer (이미지 업로드)
    WEB/express 2019. 8. 18. 22:41
    728x90

    1. 사용이유

    - 프론트 서버에서 multipart/form-data형식으로 들어올 때 사용된다.

    const multer = require('multer'); 를 한뒤,

    const upload = multer({ 설정 사항 });

    을 통해 multer를 설정한다.

    그 후, upload는 함수이므로 각종 router의 미들웨어로 활용한다.

    2. 설정 사항들.

    [routes/post.js] //라우터 폴더의 /api/post .. 를 처리하는 js 파일
    const multer = require('multer');
    const path = require('path');
    
    const upload = multer({
        storage  : multer.diskStorage({ //파일을 어디에다 저장할 것인지. (현재 돌아가고 있는 서버의 하드디스크, 구글                                             //클라우드 스토리지등)
            destination(req,file,cb){
                cb(null, 'images') // 루트 디렉토리의 이미지 폴더에 저장한다.
            },
            filename(req, file, cb){ //파일명 정해주기
                const ext= path.extname(file.originalname);  //gadamer.png 라고 하면 ext===.png 
                const basename = path.basename(file.originalname, ext); //basename은 확장자 명을 땐  gadamer
                cb(null, basename+ new Date().valueOf + ext); 
            }
        }),
        limits : {filesize : 10*1024*1024} //파일크기 업로드 제한 
    })
    • 위의 옵션중 storage는 diskStorage를 사용하여 하드디스크에 저장할 수 있고, memoryStorage를 사용하여 버퍼로 저장할 수 있다.
    • 위의 옵션중 limits
    속성 설명 기본값
    fieldNameSize 필드명 사이즈 최대값 100 bytes
    fieldSize 필드 사이즈 최대값 1MB
    fields 파일형식이 아닌 필드의 최대 개수 무제한
    fileSize multipart 형식 폼에서 파일 필드의 최대 개수 무제한
    files multipart 형식 폼에서 파일 필드의 최대 개수 무제한
    parts For multipart forms, the max number of parts (fields + files) 무제한
    headerPairs multipart 형식 폼에서 파싱할 헤더의 key=> value 쌍의 최대 개수 2000

    사이즈 제한은 Dos(denial of service) 를 보호하는데 도움이 된다.

     

    • fileFilter
    function fileFilter (req, file, cb) {
    
      // 이 함수는 boolean 값과 함께 `cb`를 호출함으로써 해당 파일을 업로드 할지 여부를 나타낼 수 있습니다.
      // 이 파일을 거부하려면 다음과 같이 `false` 를 전달합니다:
      cb(null, false)
    
      // 이 파일을 허용하려면 다음과 같이 `true` 를 전달합니다:
      cb(null, true)
    
      // 무언가 문제가 생겼다면 언제나 에러를 전달할 수 있습니다:
      cb(new Error('I don\'t have a clue!'))
    
    }

    댓글

Designed by Tistory.