multer || 파일업로드 - 241125
Multer 설치
boby-parser라는 데이터를 쉽게 처리해주는 라이브러리는 멀티파트 데이터를 처리해주지 못한다.- 멀티파트 데이터 : 이미지, 동영상, 파일 등..
body-parser가 못해주니까multer라는 라이브러리로 처리해주면된다.- body-parser는 express 4.x부터는 내장되어 있어서 따로 설치 안해줘도 되지만 multer는 설치를 해줘야 한다.
npm install multer로 설치
Multer 사용
사용전 Client에서 해줘야 할 일
- multer는 enctype으로 form 태그의 속성으로 설정을 해줘야 한다.
사용전 Server에서 해줘야 할 일
-
const multer = reauire( 'multer' );로 불러와준다.
-
미들 웨어 설정으로
dest ( destination )라는 객체에 파일을 받아서 어느 경로로 저장을 할지 정한다.!
File 한 개만 보낼 수도있고, 여러개의 File도 보낼 수 있다. 그리고 File과 Text를 같이 보낼 수도 있다.
- file을 처리 하면
upload경로에 들어가게 되는데upload는 여러개의 method를 가진다.single( ): 하나의 파일을 업로드 한다.- upload.single ( 'userfile' ) // 해당 file의 name값에 해당하는 부분을
( 'userfile' ) 에 입력하면 된다.
- upload.single ( 'userfile' ) // 해당 file의 name값에 해당하는 부분을
- 여기에 저장된 data는
req.body
- upload file을 따로 생성하지 않아도 미들웨어에서 설정을 해주면 알아서 파일이 생성된다.
한개의 file
하나의 file만 올릴 때 사용되는 upload.single( )에는 file에 대한 name값이 문자열로 1개만 들어간다.
file의 정보는 req.bodyreq.file에서 확인 할 수 있다.
-
req.file: 파일 하나 -
req.body: file이외의 나머지 정보 -
이렇게만 해서 결과화면에서 사진을 업로드 하게되면 확장자를 제대로 설정해주지 않아서 이미지가 오지않고 정보만 온다.
- 확장나나 파일명을 직접 제어하기 위해서는 위에서 사용했던
key인 deststorage나limit같은 key값을 사용 할 수있다.storage: diskStorage( )라는 객체값을 받는 함수가 있다- diskStorage( ) : 파일을 디스크에 저장하기 위한 모든 제어 기능 제공
- diskStorage( )는
destination과filename을 인자로 받는다destination은 저장할 경로로 (req, file, done)이렇게 세개의 매개변수를 갖는다. 여기서 마지막 done은 method로 콜백을 해주는데 처음인자로는 null을 받고, 그 다음인자로는 원하는 file명을 적으면 된다.filename도 (req, file, done)으로 세개의 매개변수를 받는데 마지막 done으로 실제 이름을 설정 할 수있다.
- diskStorage( )는
- diskStorage( ) : 파일을 디스크에 저장하기 위한 모든 제어 기능 제공
limit: 용량을 설정 할 수 있다.fileSize: 파일 사이즈 제한
- 확장나나 파일명을 직접 제어하기 위해서는 위에서 사용했던
storage와filename으로 확장자를 설정해주어서 이미지 업로드에 오류가 나지 않게 해줬다.
path.extname은 확장자만 반환해주는 함수이다.. .png
그리고 limit로 크기를 설정
single() - 확인해야하는 data:file - 형태:객체
여러개의 file
upload.array( ) : 여러파일을 업로들 할 때 사용, 하나의 요청 안에 여러개의 파일이 존재할 때 사용.
- input 태그 하나에 여러 파일을 업로드 // 하나의 파일에 여러 사진을 받아줄 때 :
.array( )req.files: 파일 n개req.body: file이외의 나머지 정보
- input 태그를 여러개 만들어서 업로드 // 여러개의 파일 태그가 있을 때 :
.fields( )- 하나가 아닌 여러개의 요청
- 여러 name값을 가지므로
fields함수는 인자를 배열형태로 받는다. req.files: 파일 n개req.body: file이외의 나머지 정보
<하나의 input에 파일 여러개 업로드>
input에 multiple 속성을 반드시 추가해 줘야 한다.
array라는 method를 사용해주고, data확인 해줄때에는 req.filereq.files로 해줘야 배열형태로 들어온 data를 볼 수 있다.
array() - 확인해야하는 data:files - 형태:배열
<여러개의 input에 파일 업로드>
multiplefields 속성을 사용한다.(배열 형태로 인자를 받는다.)
arrayfields를 사용.
fields는 함수인자를 배열 형태로 받고, 받는 data는 array와는 다르게 객체형태로 받는다.
fields() - 확인해야하는 data:files - 형태:객체
동적 파일 업로드
파일을 업로드 했을 때 페이지 전환이 되어 업로드가 되는 것이 아닌, 하나의 페이지에서 파일이 바뀌었으면 하는 경우에 동적 폼을 이용.
- 새로운 폼 객체를 만들어준다.
const formData = newFormData ( ) - 폼객체에
append할 수 있는데 태그에 하는것 처럼 태그 뒤에 마지막 요소로 붙이는게 아닌, 만들어준formData에 어떠한 이름을 가진 파일을 붙여준다는 뜻
static이라는 미들웨어를 설정 해준다. static폴더 설정은 여러개를 할 수 있다.!
동적 폼 axios를 사용하기 위해 작동할 함수를 설정해준다.
- file을 불러오고 불러온 file이 어떤 정보를 가지고 있는지 확인을해준다.
- file data확인 결과로 필요한 data에 접근하려면
file.files[0]으로 접근을 해줘야 한다는 것을 알았다. - 정보를 보내기 위해서는 form형태의 무언가가 필요하므로
formData라는 객체를 만들어준다. - 만들어준
fileData에append를 이용해서 file의 정보를 붙여준다.
axios를 사용하기위해 data를 설정해준다.
multer를 이용하려면enctype이 무조건multipart/form-data여야 하므로 header에 설정해준다.- res.data.path가 전체경로인 것을 확인한 뒤, img.src에 적용시켜 준다.
파일 업로드를 post로 요청을 해준다.
- 업로드한 파일인
req.file의 정보를res.send를 통해 axios에서res.data로 보내져서 client에게 보내주고 있다.- 넘어온 body의 정보가 없으므로
res.send ( req.file )을 해줌으로 업로드한 file 그대로를 client에 보내고 있다.
- 넘어온 body의 정보가 없으므로
