Javascript : nodejs 파일업로드

파일업로드

---

파일 업로드에 앞서 Express의 기능중에는 마땅한 기능을 하는 것이없다. 따라서 모듈을 설치해주어야한다.

multer라는 모듈을 설치한후 예제를 해보자!

위와 같이 다운 받으면 됨

일단은 multer를 사용하기위해서 요청을 하고

파일을 업로드 할수 있게 form을 만들어준다.(jade를 이용)

기본적인 파일 입출력 form이다. 

그럼 위와 같은 형태의 form으로 파일을 올릴수가 있게되는대 

한번 아무 파일이나 업로드를 해보자.

결과는 post를 찾을수가 없다고 나온다.

그럼 여기서 알수있는 사실은 POST 형식으로 파일데이터를 옮긴다는 뜻이고

저번에 했던 POST 방식을 이용하여 파일데이터를 볼수가 있다는 뜻이다.

2017/04/24 - [Javascript] - Javascript : nodejs POST 방식

그럼 post 형식으로 되는지 확인해보자

확인 완료

그럼 파일이 업로드가 되는지 알아보기위해서는 multer 모듈에서 추가된 기능을 알아야한다

Usage

Multer adds a body object and a file or files object to the request object. The body object contains the values of the text fields of the form, the file or files object contains the files uploaded via the form.

Basic usage example:

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

사용방법은 위와 같다. 일단 맨위의 세줄은 multer을 사용하기 위함과 upload한 파일이 어디로 저장되는지 설정하는것

중요한 것은 app.post 부분이다. 중간에 새로운 코드가 들어가있는대 이것이 뜻하는것은

upload한 파일이 존재하면 req에 파일을 추가해주는 역할을 한다.

여기서 중요한건 avatar라 적힌부분은 form형식에서 name부분이 일치해야한다!

(upload.single이a vatar면 name도 avatar로 지정)

그리고 다시 실행해보면 업로드가 완료된것을 볼수있다.

옆에 이상한 문자는 파일이름이다. 사진을 잘보면 upload 폴더에 똑같은 이름의 파일이 있는것을 확인