[Node.js] HTTP통신 Get 과 Post 그리고 formdata 분리하기

 

공부하면서 정리한 내용입니다

참고한 내용은 링크를 확인해주세요

---

 

 

 

🌐 Get

데이터 조회하는 경우 사용된다.

URL이 노출되어 있으므로 update, insert delete는 하지않는다.

// node서버 

const express = require('express');
const app = express();
                            
app.get('/dir', function (request, response){    //get
    console.log(request.query);       //전체데이터 받기
    console.log(request.query.key);   //key값의 데이터만 받기
    response.end();
});

// 클라이언트

let URL = '<http://127.0.0.1:3000/dir/?key=value>'; // RPC 뒤에 전송할 데이터가 쿼리형태로 붙는다.

let xhr = new XMLHttpRequest();
xhr.open('GET', URL); 
xhr.send();

 

 

🌐 Post

데이터를 request의 body에 담아 보내는 방식

URL에 노출되지 않아 보안 및 데이터 입력하는데 사용된다.

// node서버

const express = require('express');
const app = express();

app.post('/dir', function (request, response){	//post
    console.log(request.body);      // body
    console.log(request.files);     // files
    response.end();
});

텍스트는 request.body, 이미지는 request.file 에 담겨있다.

FormData를 담고있는 Request Body는 미들웨어를 통해서 분해 및 확인한다.

 

🔗 Content-type의 종류

// 클라이언트 //application/json

let data = {
	"key": value
}

let xhr = new XMLHttpRequest();
xhr.open(Method, URL); 
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(data));

// 클라이언트 //multipart/form-data

let formData = new FormData();
formData.append("key", value);

let xhr = new XMLHttpRequest();
xhr.open(Method, URL); 
xhr.setRequestHeader('Content-type', 'multipart/form-data');
xhr.send(formData);

formData 분해하기

formData는 단순한 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태라고 볼 수 있다.
따라서 문자열화할 수 없는 객체이기 때문에 console.log를 사용해서 프린트할 수 없다.
만약 전송 전에 FormData의 값을 확인하고 싶다면, 아래와 같이 formData의 메소드를 사용해야 한다.

🔗 formdata

for (let key of formData.keys()) {
    console.log(key);     // key
} 

for (let value of formData.values()) {
    console.log(value);   // value
}

for(var pair of formData.entries()) {
   console.log(pair);     // [key, value]
}

텍스트와 파일 분해하기

클라이언트에서 아래와같이 이미지를 폼데이터로 전송할 경우

//클라

formData.append("fruits-img", img-file);  //파일객체
formData.append("fruits", "peach");

Express에서는 NPM multer 사용

//서버//simple.js

let upload = multer({ dest: './dir/image' }); //저장위치//디렉토리없는경우 자동으로 생성됨

app.post('/RPC', upload.single("fruits-img"), function(request, response){
	console.log(request.file);  // 저장된 위치와 파일명, 크기 등 정보 보여짐
}

//서버//detail.js

let upload = multer({ 
    storage: multer.diskStorage({              // 파일을 디스크에 저장하기위한 제어기능
        destination: function(req, file, cb){  // 파일 업로드위치
            cb(null, "./dir/image");           
        },
        filename: function (req, file, cb) {   // 파일명
            cb(null, "새로운파일이름.png");	
        }
    }) 
});
    
app.post('/RPC', upload.single("fruits-img"), function(request, response){
    console.log(request.file); 
}

 

 

 

 

 

Error Error: Multipart: Boundary not found

Error Formdata 로 전송 시, 서버단에서 request.body : { } 출력되는 경우

Error 이미지파일 전송시 Multer 오류 MulterError: Unexpected field

 

 

 

 

---