body-parser
- 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
post로 정보를 전송할 때req.body로 받을 수 있게 도와줌(설정 안 하면undefined뜸)express 4.x부터 내장되어 있어 설치필요X- 단점 : 멀티파트 데이터를 처리하지 못함(멀티파트 데이터 : 이미지, 동영상 파일 등)
- 이를 보완하기 위해서
multer를 사용함
express.urlencoded
app.use(express.urlencoded({extended:true}));extended: 중첩된 객체의 표현 여부extended : true일 경우{person:{name:'hobby','age':'3'}}; //이런식으로 가져옴extended : false일 경우{'person[age]':'3','person[name]':'hobby'};
express.json()
app.use(express.json());express애플리케이션에서JSON형태의 요청(request) body를 파싱(parse)하기 위해 사용되는 미들웨어
(파싱 : 구문분석, 문장이 이루고 있는 구성 성분을 분해하고 분해된 성분의 위계 관계를 분석하여 구조를 결정하는 것, 즉 데이터를 분해 분석하여 원하는 형태로 조립하고 다시 빼내는 프로그램을 말함)
예를들어 app.get('/user', (req,res)=>{}) 여기서 req.body로 객체형태로 받아오는게 위에서 express.json을 사용했기 때문임
전송타입
express.urlencoded->application/x-www-form-urlencoded로 전송함, 얘의 headers를 보면
headers:{
'content-type': 'application/x-www-form-urlencoded'
}이렇게 되어 있는걸 볼 수 있다.
즉, form으로 제출되는 값은 저 형태이며 express.json()으로는 값을 해석할 수 없음
express.json은JSON형태의 데이터를 해석해줌
multer
- 파일 업로드를 위해 사용되는 미들웨어
express로 서버를 구축할 때 가장 많이 사용되는 미들웨어
//multer 설치하기
npm install multer
//app.js에 multer 불러오기
const multer = require('multer')
//dest : 파일을 업로드하고 그 파일이 저장될 경로를 지정하는 속성
const upload - multer({dest:'uploads/',});
//single() : 하나의 파일 업로드
app.post('/upload', upload.single('userfile'), (req,res)=>{
console.log(req.file);
});
//array() : 여러 파일을 업로드할 때 사용
//하나의 요청 안에 여러개의 파일이 존재할 때
app.post('/upload', upload.array('userfile'),(req,res)=>{
console.log(req.files);
});
//fields() : 여러 파일을 업로드할 때 사용
//하나의 요청이 아닌 여러개의 요청이 들어올 때
app.post('/upload', upload.fields([{name : 'userfile'}, {name: 'userfile2'}]), function(req,res){
console.log(req.files);
});multer정리
| single() | array() | fields() |
|---|---|---|
| 하나의 파일 업로드 할때 | 여러 파일을 업로드할 때 사용, 하나의 요청 안에 여러 개의 파일이 존재할 때 | 여러 파일을 업로드 할 때 사용, 하나의 요청이 아닌 여러개의 요청이 들어올 때 |
| req.file : 파일 하나 req.body: 나머지 정보 | req.files : 파일 n개 req.body : 나머지 정보 | req.files : 파일n개 req.body : 나머지 정보 |
실습
- 동적폼으로 파일 여러개 올리기
- async / await 이용
- axios 이용
- 업로드된 파일은
uploads폴더에 넣어 놓기 - 파일명은 중복이 되지 않게 하기
- 업로드 후 응답받은 페이지에서 이미지 모두 보여주기
- 기본세팅
- 제일 바깥에
index.js파일 만들기 view폴더 만들고index.ejs파일 만들어주기
index.js파일에 기본세팅을 해줌
404페이지도 만들어줌
__dirname을 하면 지금index.js파일이 저장되어 있는 디렉토리까지의 경로를 찾아줌(절대경로)
경로 설정해줬으니깐 uploads폴더 만들어줌
diskStorage: multer 모듈은 파일을 저장하는 여러가지 방식을 지원하는데, 그 중 하나인diskStorage는 파일을 디스크에 저장하기 위한 모든 제어 기능을 제공함
옵션
destination: 파일이 저장될 경로를 작성
난uploads폴더 만들었으니깐uploads/로 설정해줌
2번째 옵션
-
filename:file의 이름을 변경해서 저장 -
ext = path.extname(file.originalname)
-> 이름에서 확장자만 추출해ext변수에 저장 -
newName = path.basename(file.originalname, ext) + Date.now() + ext;
-> 파일 이름에서 확장자(ext)만 뺀 이름 + 현재시간 + 아까 변수에 저장한 확장자를 더해서 새로운 문자를 만들어서newName이라는 변수에 저장해줬음
미들웨어 등록해주고 (limit 옵션도 있는데 뺐음)
이제 ejs 파일 작성하러 ㄱㄱ
onsubmit : form 태그 안에서 form전송을 하기 전에 입력된 유효성을 체크하기 위해 사용하는 이벤트
input type = submit 클릭시 submit을 진행하는데, onsubmit = 'return false'가 있으면 진행을 안함
preventDefault():a태그나submit태그를 누르게 되면href를 통해 이동 하거나, 창이 새로고침하여 실행됨preventDefault를 사용해서 이러한 동작을 막아줄 수 있음
주로 사용하는경우는
a태그를 눌렀을때도href링크로 이동하지 않게 할 경우form안에submit역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우(submit은 작동됨)
예시는 여기서 참고
FormData(): 폼 데이터를 쉽게 저장할 수 있게 해주는 메서드
다시 index.js로 와서 어떤식으로 어떻게 보낼지 설정을 해줌
난 한번에 여러개를 전송 할거기 때문에 array()를 사용했음
index.ejs로 와서 input값들을 formData에 저장시켜줌 array()방식은 배열로 오니깐 첫번째 애를 선택하려면 [0]인덱스를 선택해줘야댐
그리고 얘들 이름 서로 같아야됨
axios 방식으로 보낼꺼니깐 cdn 복붙해주고
아까 저장한 data에 아까 저장해놓은 formData 보내주고
Headers는 꼭 multipart/form-data도 보내줘야됨
why?)
쉽게 말해서 파일 업로드 할때는 얘씀
근데 async / await써야 하니깐 바꿔주고
뭐가 오는지 확인해보기 위해 console 찍어보면
path 추가 안해줘서 오류뜸;
index.js에 추가해주고 다시 확인해보면
data에 들어있는걸 볼 수 있음
이제 사진추가하러 ㄱㄱ
위에있는 div태그 안에 이미지 경로를 innerHTML로 넣어줫음
마지막으로 사진을 여러개 올려야 되는 조건도 있으니깐 마무리하러 ㄱㄱ
사진을 여러개 업로드 하면 배열형태로 오는데 그걸 반복문을 사용해서 하나씩 formData에 저장함
사진 추가도 똑같이 반복문을 이용해서 해줌
잘 나옴
