NodeJS - File Upload 처리하기
안녕하세요.
Hynn 입니다.
이번 포스팅에서는 NodeJS 환경에서 파일을 업로드하고 이를 처리하는 기초방법에 대해서 알아보도록 하겠습니다.
이를 위해 NPM Module 한가지를 새롭게 사용할 예정입니다.
파일 업로드 기능을 추가하면 이제 우리가 일반적으로 알고 있는 웹 사이트의 형태를 갖추어 나간다고 할 수 있겠습니다.
시작해보겠습니다.
==========
==========
1. File Upload 를 위한 NPM Module 설치하기
먼저 이를 위해서는 NPM Module 을 하나 사용해야 합니다.
새롭게 다 짜기에는 매우 방대한양, 복잡한 구성을 지니고 있다 보니, 모듈을 바로 사용해보도록 하겠습니다.
npm init -y
npm install multer바로 'multer' 라는 Module 입니다.
이 Module 은 파일이 업로드 되면, 이를 손쉽게 처리하는 Middleware 기능을 가지고 있습니다.
이 Module 의 기초적인 구성은 아래와 같이 되어 있습니다.
{
storage: MemoryStorage {},
limits: {},
preservePath: undefined,
fileFilter: [Function: allowAll]
}이를 구성하기 위해서는 먼저 Backend Level 에서 Middleware JavaScript 파일을 생성해야 합니다.
단계별로 진행해보겠습니다.
이 작업을 위해서는 HTML 에서 3개의 INPUT 형태에서 아래와 같은 유형의 타입으로 3종류로 나누어볼 수 있습니다.
당연하게도 아래의 HTML Element 는 Form 내에 존재하고, submit type 의 버튼이나 input이 존재해야 합니다. 그렇지 않다면 별도의 액션을 추가해야 하겠습니다.
<input type="file" name="upload">
<input type="file" name="upload">
<input type="file" name="upload" multiple />
<input type="file" name="upload1">
<input type="file" name="upload2">
<input type="file" name="upload3">
<input type="file" name="upload4">
<input type="file" name="upload1">
<input type="file" name="upload2">
<input type="file" name="upload3">
<input type="file" name="upload4">
각각의 유형에 따라 맞는 방법을 선택해야 합니다.
각각의 개연적인 기초설명이 되야한다면, 아래와 같습니다.
- Single - 하나의 파일을 업로드 해야할때 사용합니다.
- Array - 하나의 업로드창에 여러개의 파일을 동시에 지정합니다.
- Multiple - 각각의 업로드 창에 용도에 맞는 파일을 나누어 업로드해야 할 때 사용합니다.
물론 위의 정의된 형식이 정답은 아닙니다만, 사용자의 필요, 기능구성에 맞게 적절한 방법을 선택해야 하겠습니다.
유형은 이외에도 다른 형태가 존재할 수 있지만, 이 포스팅에서는 3개의 유형만을 다룰 예정입니다.
먼저 Multer 를 가져오고, 내장 Module 인 path 를 추가로 사용할 예정이기때문에, 2개의 모듈을 "Require" 를 사용해 가져오도록 하겠습니다.
const multer = require("multer");
const path = require("path");
const multer = require("multer");
const path = require("path");
그리고 난뒤, 변수를 선언하고, Multer 의 구성요소에 맞게 함수를 설정해야 합니다.
storage: MemoryStorage {},
limits: undefined,
preservePath: undefined,
fileFilter: [Function: allowAll]
여기서는 전체를 설정하지는 않고, 기초적으로 필요한 "Storage", "Limits" 두개의 영역만을 설정해서 업로드가 되도록 설정할 예정입니다.
storage : multer.diskStorage({
destination : (req,file,done)=>{
done(null, "upload/");
},
filename : (req,file,done)=>{
const ext = path.extname(file.originalname);
const basename = path.basename(file.originalname, ext);
const filename = `${basename}_${Date.now()}${ext}`;
done(null, filename);
};
위의 예시에서는 로컬에 저장하기 위해 "diskStorgaeg" method 를 사용했습니다.
이외에도 이러한 유형 method 는 4가지의 대표적 method 를 제공합니다.
- diskStorage : 내 PC의 로컬저장소로 업로드된 파일을 저장합니다.
- memoryStorage : 로컬저장소가 아닌 메모리에 저장됩니다. 아주 작은 파일에게 적합합니다.
- cloudStorage : AWS 혹은 Google Cloud 같은 Cloud 저장소에 저장할 때 사용됩니다.
- handleFile : Storage 위치를 커스텀할 때 사용됩니다.
물론, 로컬저장소나, 이런 것들은 다 path 를 지정해야, 원하는 경로에 저장이 됩니다.
위의 예제의 경우, "diskStorage" 를 사용해서, 2개의 method 를 사용해서 각각 설정을 하였습니다.
각각의 역활은 아래와 같습니다.
- Destination : File 이 저장되는 경로를 설정합니다.
- Filename : 업로드된 파일의 저장이름을 지정합니다.
위 함수의 경우, 비동기식으로 구성하기 위해서 Async/Await 을 사용할 수 없어, Callback function 으로 구성이 되어 있습니다.
Destination 의 경우, 저장경로를 지정하였고, Filename 의 경우, "ext" 가 확장자, "basename" 이 파일명이 되고, "filename" 이 서버에 업로드 되는 시점에 추가되는 파일명이 구성됩니다.
즉 위의 함수를 구성할 때, 아래의 형식으로 파일명이 생성이 됩니다.
ex) 1.jpgext = .jpg
basename = 1
filename = 1_업로드시간.jpg
이제 추가적으로, 업로드가 가능한 파일의 제한용량을 설정하는 "Limits" 를 추가해야 합니다.
const upload = multer({
storage : multer.diskStorage({
destination : (req,file,done)=>{
done(null, "upload/");
},
filename : (req,file,done)=>{
const ext = path.extname(file.originalname)
const basename = path.basename(file.originalname, ext);
const filename = `${basename}_${Date.now()}${ext}`
done(null, filename);
}
}),
limits : {fileSize : 5 * 1024 * 1024 }
});
const upload = multer({
storage : multer.diskStorage({
destination : (req,file,done)=>{
done(null, "upload/");
},
filename : (req,file,done)=>{
const ext = path.extname(file.originalname)
const basename = path.basename(file.originalname, ext);
const filename = `${basename}_${Date.now()}${ext}`
done(null, filename);
}
}),
limits : {fileSize : 5 * 1024 * 1024 }
});이제 구성이 완료되었습니다.
"Limits" 의 경우, 5MB, 즉 1024byte * 1024byte = 1MB, 1MB*5 , 최종적으로 5MB 의 제한으로 추가가 됩니다.
만약 이 파일을 초과하는 용량의 경우, 파일용량 초과로 인해, 업로드가 실패하게 됩니다.
Multer 의 기본 사용법입니다.
궁금하시거나 문의사항이 있다면 댓글로 문의해주세요
감사합니다 :)