Node.js + Multer + Ajax를 사용한 파일 업로드 예제

Node.js에서 Multer를 이용하여 파일 업로드를 수행하는 예제

Multer는 multipart/form-data 처리를 위한 미들웨어임

참고 : https://github.com/expressjs/multer

1. app.js 에 multer 선언

var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var session = require('express-session'); var multer  = require('multer'); var office = require('./routes/office'); var app = express(); // uncomment after placing your favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(multer()); app.use(cookieParser()); app.use(session({   secret: 'keyboard cat',   resave: false,   saveUninitialized: true, })); app.use(express.static(path.join(__dirname, 'public')));

2. office.js Route 파일

- file upload를 실행 로직

var CONSTS = require('./consts'); var express = require('express'); var fs = require('fs'); router.post('/info/upload-new-photo', function(req, res, next) {     console.log(req.body);     console.log(req.files);     var imageFile = req.files.uploadnewphoto;     if (imageFile) {         // 변수 선언         var name = imageFile.name;         var path = imageFile.path;         var type = imageFile.mimetype;         // 이미지 파일 확인         if (type.indexOf('image') != -1) {             // 이미지 파일의 경우 : 파일 이름을 변경합니다.             var outputPath = CONSTS.UPLOADPATH + Date.now() + '_' + name;             fs.rename(path, outputPath, function (err) {                 if (err) {                     res.send(CONSTS.getErrData(err.code));                     return;                 }                 res.send(CONSTS.getErrData('0000'));             });         } else {             // 이미지 파일이 아닌 경우 : 파일 이름 제거             fs.unlink(path, function(err) {                 res.send(CONSTS.getErrData('E004'));             });         }     } else {         res.send(CONSTS.getErrData('E003'));     } });

3. basic.jade 파일

- 파일 업로드용 client 파일

- Ajax로 파일을 전송한다.

script(type="text/javascript").         $(document).ready(function() {             $("#photo-update-action-selector").click(function() {                 $("#photo-update-action-selector").children(".select-items").toggle();             });             $("#upload-new-photo").click(function() {                 $("#photo-upload-error-box").html("");                 $("#uploadnewphoto").click();             });             $("#remove-photo").click(function() {             });             $("#uploadnewphoto").change(function() {                 var file = this.files[0];                 if (checkUploadFile(file, 700) == true) {                     var formData = new FormData($('#frmOffice')[0]);                     //- formData.append('file', $("#uploadnewphoto")[0].files[0]);                     $.ajax({                         url: "/office/info/upload-new-photo",                         type: "POST",                         processData: false,                         contentType: false,                         data: formData,                         success: function(result) {                             if (result.code == "0000") {                                 alert('success');                                 //- location.href = "/home#{logintype}";                             } else {                                 $("#photo-upload-error-box").html(result.message);                             }                         },                         error: function(req, status, err) {                             //- alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);                             $("#errormsg").html("code:"+status+"\n"+"message:"+req.responseText+"\n"+"error:"+err);                         }                     });                 }             });         });         form#frmOffice(name="frmOffice", enctype="multipart/form-data")             div.row-item                 fieldset                     legend.row-title  로고                     div.settings-item                         div#photo                             div                                 div                                     div.photo-preview.left                                         img#photo-upload-preview(src="/images/no-profile-pic.png")                                     div.upload-action-selector.left                                         div#photo-update-action-selector.select-container                                             div.select-arrow                                             div.selected-item 이미지 변경                                             ul.select-items(style="display:none")                                                 li#upload-new-photo.select-enabled.select-hovering-item 새 이미지 업로드                                                 li#remove-photo.select-enabled 제거                                         div#photo-upload-error-box.error-message                                         div.accepted-photo-types .jpg, .gif, .png. 최대 파일 크기는 700K입니다.                                         div                                             input#uploadnewphoto(type="file" name="uploadnewphoto")

이 글은 Evernote에서 작성되었습니다. Evernote는 하나의 업무 공간입니다. Evernote를 다운로드하세요.