[Node.js/express] File Upload

---

 

#1. File Upload

1. File Upload

1) 파일 전송 (Front-End)

• HTML의 <form> 태그 상에서 <input type="file" /> 요소를 사용하여 form에 명시 된 action 속성으로 백엔드에 전송한다.
• Ajax는 파일 업로드가 불가능 하기 때문에 JavaScript의 file api를 사용하여 별도로 업로드 기능을 구현해야 한다.
• 파일 전송시에는 반드시 <form> 태그에 enctype="miltipart/form-data" 속성이 명시되어 있어야 한다.
  • 이 때문에 파일 업로드를 백엔드에서는 multipart 전송이라고 표현하기도 한다.

<!-- 예시 -->
<!-- GET 방식 전송으로는 처리 불가 -->

<form method='post' action='/upload/simple' enctype='multipart/form-data'>
    <input type='file' name='myphoto' />
    <input type='submit'>
</form>

 

2) 파일 수신 (Back-End)

• node.js의 multer 패키지 설치

yarn add multer

 

- 업로드 객체에 대한 환경 설정

/** multer 객체 생성 -> 파일 업로드 환경 설정 수행 */
const multipart = multer({

  /** 저장될 디렉토리 경로 및 파일 이름 */
  storage: multer.diskStorage({
  
    /** 업로드 된 파일이 저장될 디렉토리 설정 */
    // req는 요청 정보, file은 최종적으로 업로드 된 결과 데이터가 저장되어 있을 객체
	destination: function(req, file, callback) { 
      callback(null, 업로드 될 파일이 저장될 폴더 경로);
    },
    
    /** 업로드 된 파일이 저장될 파일 이름을 결정한다. */
    filename: function(req, file, callback) {
      callback(null, 저장될 파일이름); 
	}
  }),
  
  /** 용량, 최대 업로드 파일 수 제한 설정 */
  Limits: {
    files: 최대 업로드 가능 파일 수(int),
    filesSize: 최대 업로드 가능 크기(byte)
  },
  
  /** 업로드 될 파일의 확장자와 최대 용량 제한 */
  fileFilter: (req, file, callback) => {
  	callback(null, boolean 값);
  }
});

 

- 백엔드 페이지에서 업로드 처리

// 업로드를 위한 함수 리턴받기
// 멀티 업로드인 경우, single 대신 array 함수 사용)
const upload = multipart.single('input태그의 name속성값');

upload(req, res, function(err) {
  if(err) {
  	.. 에러 발생시 처리할 코드 ..
  };
  
  .. 업로드 성공시 처리할 코드 ..
});

 

2. Multer

1) Multer란?

• Multer는 파일 업로드를 위해 사용되는 multipart/form-data를 다루기 위한 node.js의 미들웨어이다.
• Multer는 multipart(multipart/form-data)가 아닌 폼에서는 동작하지 않는다.
• Multer는 body 객체와 한 개의 file 혹은 여러개의 file객체를 request 객체에 추가한다.
• body 객체는 폼 텍스트 필드의 값을 포함하고, 한 개 혹은 여러개의 파일 객체는 form을 통해 업로드 된 파일들을 포함하고 있다.

 

※ 내용 참조

https://github.com/expressjs/multer/blob/master/README.md

GitHub - expressjs/multer: Node.js middleware for handling `multipart/form-data`.

 

2) 사용 정보

• 각각의 파일은 아래의 정보를 포함하고 있다.

Key	Description	Note
fieldname	폼에 정의된 필드 명
originalname	사용자가 업로드한 파일 명
encoding	파일의 인코딩 타입
mimetype	파일의 Mime 타입
size	파일의 바이트(byte) 사이즈
destination	파일이 저장된 포러	DiskStorage
filename	destination에 저장된 파일 명	DiskStorage
path	업로드된 파일의 전체 경로	DiskStorage
buffer	전체 파일의 buffer	MemoryStorage

 

• Multer로 전달 가능한 옵션

Key	Description
dest or storage	파일이 저장될 위치(업로드를 더 제어할 시 storage 옵션 사용)
fileFilter	어떤 파일을 허용할지 제어하는 함수
limits	업로드 된 데이터의 한도
preservePath	파일의 base name 대신 보존할 파일의 전체 경로

 

- single(fieldname)

• fieldname 인자에 명시된 이름의 단수 파일을 전달 받는다. 이 파일은 req.file에 저장된다.

- array(fieldname[, maxCount])

• fieldname인자에 명시된 이름의 파일 전부를 배열 형태로 전달 받는다.
• 선택적으로 maxCount에 명시된 값 이상의 파일이 업로드 될 경우 에러를 출력할 수 있다.
• 전달된 배열 형태의 파일은 req.file에 저장된다.