Nodejs 고급: express+multer 기반 파일 업로드 예제

개요

이미지 업로드는 웹 개발에서 자주 사용되는 기능인데, 노드 커뮤니티 역시 이에 대해 비교적 완벽한 지원을 하고 있습니다.

일반적으로 사용되는 오픈 소스 구성 요소에는 multer, formidable 등이 있습니다. 이 두 오픈 소스 구성 요소의 도움으로 이미지 업로드를 쉽게 수행할 수 있습니다.

이 글에서는 주로 다음 내용을 설명하며, 이후 장에서는 기술 구현 세부 사항에 대해 더 자세히 살펴보겠습니다.

기본 예: express 및 multer를 사용하여 단일 또는 여러 이미지를 업로드합니다.

공통 API: 업로드된 이미지에 대한 정보를 가져옵니다.

고급 사용: 저장된 이미지 경로와 이름을 사용자 정의합니다.

환경 초기화

는 명령 한 줄로 매우 간단합니다.

npm install express multer multer --save

각 예시 아래에는 다음 두 파일이 있습니다.

➜ upload-custom-filename git:(master) ✗ tree -L 1
.
├── app.js # 服务端代码，用来处理文件上传请求
├── form.html # 前端页面，用来上传文件

기본 예: 단일 이미지 업로드

app.js.

var fs = require('fs');
var express = require('express');
var multer = require('multer')
 
var app = express();
var upload = multer({ dest: 'upload/' });
 
// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
  res.send({ret_code: '0'});
});
 
app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});
 
app.listen(3000);

form.html.

<form action="/upload-single" method="post" enctype="multipart/form-data">
  <h2>单图上传</h2>
  <input type="file" name="logo">
  <input type="submit" value="提交">
</form>

서비스를 실행합니다.

node app.js

http://127.0.0.1:3000/form을 방문하여 이미지를 선택하고 "제출"을 클릭하면 완료됩니다. 그러면 업로드 디렉터리에 추가 이미지가 표시됩니다.

기본 예: 다중 이미지 업로드

코드는 더 간단할 수 없습니다. 이전 upload.single('logo')를 upload.array('logo', 2)로 변경하면 됩니다. 의미: 동시에 2개의 이미지 업로드를 지원하며 이름 속성은 로고입니다.

app.js.

   
var fs = require('fs');
var express = require('express');
var multer = require('multer')
 
var app = express();
var upload = multer({ dest: 'upload/' });
 
// 多图上传
app.post('/upload', upload.array('logo', 2), function(req, res, next){
  res.send({ret_code: '0'});
});
 
app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});
 
app.listen(3000);

form.html.

<form action="/upload-multi" method="post" enctype="multipart/form-data">
  <h2>多图上传</h2>
  <input type="file" name="logos">
  <input type="file" name="logos">
  <input type="submit" value="提交">
</form>

동일한 테스트 단계는 반복되지 않습니다.

업로드된 이미지 정보 가져오기

이미지를 서버에 저장하는 것 외에도 이미지 정보를 데이터베이스에 저장하는 등 많은 작업을 수행해야 하는 경우가 많습니다. .

원본 파일명, 파일 형식, 파일 크기, 로컬 저장 경로 등 자주 사용되는 정보입니다. Multer의 도움으로 우리는 이 정보를 쉽게 얻을 수 있습니다.

이때도 multer는 다음 코드와 같이 req.file에 파일 정보를 작성합니다.

app.js.

var fs = require('fs');
var express = require('express');
var multer = require('multer')
 
var app = express();
var upload = multer({ dest: 'upload/' });
 
// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
  var file = req.file;
 
  console.log('文件类型：%s', file.mimetype);
  console.log('原始文件名：%s', file.originalname);
  console.log('文件大小：%s', file.size);
  console.log('文件保存路径：%s', file.path);
 
  res.send({ret_code: '0'});
});
 
app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});
 
app.listen(3000);

form.html.

<form action="/upload" method="post" enctype="multipart/form-data">
  <h2>单图上传</h2>
  <input type="file" name="logo">
  <input type="submit" value="提交">
</form>

서비스를 시작하고 파일을 업로드하면 콘솔에 정보가 출력되는 것을 볼 수 있습니다.

파일 형식: image/png
원본 파일명: 1.png
파일 크기: 18379
파일 저장 경로: upload/b7e4bb22375695d92689e45b551873d9

맞춤 파일 업로드 경로 및 이름

가끔 파일 업로드 경로와 이름을 사용자 정의하고 싶을 때가 있는데, multer도 이를 쉽게 구현할 수 있습니다.

로컬 저장 경로 사용자 정의

예를 들어 my-upload 디렉터리에 파일을 업로드하려면 대상 구성 항목을 수정하면 됩니다.

var upload = multer({ dest: 'upload/' });

위 구성에서는 모든 리소스가 동일한 디렉터리에 저장됩니다. 때로는 다양한 파일에 대한 설정을 개인화해야 하는 경우 다음 섹션을 참조할 수 있습니다.

로컬에 저장된 파일 이름 사용자 지정

코드는 약간 길지만 똑같이 간단합니다. Multer는 리소스 저장 경로와 파일 이름을 개인화하기 위한 저장 매개변수를 제공합니다.

사용 시 주의사항은 다음과 같습니다.

대상: 리소스의 저장 경로를 설정합니다. 이 구성 항목이 없으면 기본적으로 /tmp/uploads에 저장됩니다. 또한 경로를 직접 만들어야 합니다.

filename: 로컬에 저장된 리소스의 파일 이름을 설정합니다.

app.js.

var fs = require('fs');
var express = require('express');
var multer = require('multer')
 
var app = express();
 
var createFolder = function(folder){
  try{
    fs.accessSync(folder);
  }catch(e){
    fs.mkdirSync(folder);
  }
};
 
var uploadFolder = './upload/';
 
createFolder(uploadFolder);
 
// 通过 filename 属性定制
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadFolder);  // 保存的路径，备注：需要自己创建
  },
  filename: function (req, file, cb) {
    // 将保存文件名设置为 字段名 + 时间戳，比如 logo-1478521468943
    cb(null, file.fieldname + '-' + Date.now());
  }
});
 
// 通过 storage 选项来对 上传行为 进行定制化
var upload = multer({ storage: storage })
 
// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
  var file = req.file;
  res.send({ret_code: '0'});
});
 
app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});
 
app.listen(3000);

form.html.

<form action="/upload" method="post" enctype="multipart/form-data">
  <h2>单图上传</h2>
  <input type="file" name="logo">
  <input type="submit" value="提交">
</form>

테스트 단계에 대해서는 자세히 설명하지 않으니 방문하시면 효과를 아실 수 있습니다.

뒤에 적음

이 글에서는 너무 많은 원리를 다루지 않고 multer의 기본적인 사용법을 소개하고 있습니다. 낚시하는 법을 가르치는 것보다 낚시하는 법을 가르치는 것이 낫다는 속담처럼, 다음 장에서는 파일 업로드에 대한 세부 사항을 파헤쳐 독자들이 파일 업로드에 대해 더 깊이 이해할 수 있도록 할 것입니다.