업로드 요청 이미지 파일 저장하기

  시작하기

이번에는 express 4.x 를 이용한 업로드 이미지 저장하기입니다.

javascript로 업로드 요청하기는 다음 포스팅을 참조해주세요~^^

  소스코드

우선 'multer'로 모듈을 설치해주세요.

설치방법은 커맨드 창에서 npm install multer 명령어로 직접 설치하는 방법과 package.json을 이용한 설치가 있습니다.

설치가 끝나셨다면 아래와 같이 multer 미들웨어를 추가해주세요.

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

여기서 dest는 업로드 파일을 저장할 폴더를 지정하는 거구요. 저 소스코드를 입력한다면 폴더가 없더라도 생성을 직접 해준답니다.

추가가 끝나셨으면 아래 함수를 만들어주시구요

/*이미지 업로드 함수*/
function imageUpload(files) {
    fs.readFile(files.path, function (err, data) {
        var filePath = __dirname + '\\uploadFolder\\' + files.originalname;
        fs.writeFile(filePath, data, function (error) {
            if (error) {
                throw error;
            } else {
                fs.unlink(files.path, function (removeFileErr) {
                    if (removeFileErr) {
                        throw removeFileErr;
                    }
                });
            }
        });
    });
}

이미지 파일이 전송되면 파일 이름이 업로드할 때와의 파일과 달라서 위와 같이 새로 저장한다음 수정하기 전의 파일을 삭제해주는 소스코드입니다.

다음 아래와 같이 POST 처리를 해주시면 됩니다.

/*이미지 업로드*/
app.post('/upload', upload.array('uploadFile'), function (req, res) {
    var filesLength = req.files.length;
    var uploadCnt = 0;

    if (filesLength <= 0) {
        res.status(500).end();
    } else {
        for (var i = 0; i < filesLength; i++) {
            imageUpload(req.files[i]);
            uploadCnt += 1;

            if (uploadCnt == filesLength) {
                res.status(200).end();
            }
        }
    }
});

이 부분은 얼마든지 커스터 마이징이 가능한 부분인데요.

저는 업로드 요청이 없을경우와 있을 경우로 나누어서 작성했습니다.

  결과

좀 전에 설정하신 폴더에 이미지가 저장된 것을 보실 수 있습니다.

제가 해 본 방법중에는 이 방법이 가장 쉬운거 같더군요.

혹시 다른 더 좋은 방법이 있으시면 말씀해주세요~ ^^