[ 우당탕탕 인턴 ] Node.js FileUpload, File받아오기

들어가기전

이번에 인턴을 하면서 인증서를 검증하는 툴을 만드는 업무를 맡게 되었다..! 두둥탁 !

node.js 잘 모르지만 일단 뚱땅뚱땅 열심히 해봐야지 하고 코드 작성하는데..! 

두둥 ! client단에서 파일을 업로드하면 req.body안에 파일이 들어있을 줄 알았는데 아무것도 받아오지 못한다 !! 쿠광!

응애 개발자 결국 stackoverflow에 질문을 남기게 되는데..!

Node.js File 받아오기

file, image, 제목, 내용 등을 입력하여 DB에 저장하는 페이지가 있다고 할 때 formdata에 담아서 전송을 해야한다.

처음에는 이것도 몰라서 무작정 업로드된 파일을 body안에 넣었으나 제대로 동작하지 않았다. 

 

FormData는 XMLHttpRequest 전송을 위해 특수하게 설계된 객체이기 때문에 특정한 조작을 하지 않은 이상 문자열화가 불가능하다.

 

내 React Code는 아래와 같았다.

// React - FileUplader.js

    const handleSubmission = (e) => {
        e.preventDefault();
        if(isSelected === false){
            alert("load the file");
        }
        else{
            const formData = new FormData();
            formData.append("certificate",selectFile);

            // API CALL
            fetch("http://localhost:8080/upload", {
                method: "POST",
                body: formData,
                headers : {
                    "Content-Type" : "multipart/form-data"
                }
            }).then((response) =>response.json())
            .then((result)=>{
                console.log("Success : ", result);
            })
                .catch((error)=>{
                    console.error("Error : ",error);
                });
        }
    };

사용자가 File을 업로드하고 submit button을 누르면 "http://localhost:8080/upload"로 요청을 보낸다. 이전에 사용자가 업로드한 파일을 formdata 객체에 넣어주고, 해당 객체를 body에 넣어 전송해준다. 

 

이렇게하면 body에서 바로 받아올 수 있을 것이라고 생각했으나 ! 결과는 {} ..

아래는 내가 작성했던 server.js 코드였다.

/upload 로 post 요청이 들어오면 req.body에서 사용자가 보낸 데이터를 받아올 수 있을 것이라고 생각 했으나 결과는 {} 였다.

app.use(cors()); 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));

app.post('/upload', async function(req ,res){
    try {
        const file = req.files; // undeifined
        const bodyData = req.body; // {}
        console.log("file : ",file);
        console.log("bodyData : ",bodyData);

        res.status(200).send({
            message: "FILE RECEIVED!"
        });
    } catch(error){
        res.send("ERROR")};
});

파일을 받아오기 위해서는 "multer" OR "express-fileupload"를 사용해야 했었다. !!!!

나는 multer를 사용하여 아래와 같이 코드를 작성하였다.

const multer = require('multer');
const upload = multer({
    dest : "public/"
});

app.post('/upload', upload.single('file'), function(req ,res) {
	// 중간코드
});

multer middleware를 사용하여 사용자로부터 받아온 파일을 public/ 폴더에 저장시킨다. 

이후 app.post ('/uploac'... ) 코드 안에 해당 저장된 파일을 다시 읽어와 처리를 하는 식으로 코드를 작성하였다.

 

아직 제대로 이해하고 짠 코드가 아니라서 다음에 더 자세히 해당 middleware에 대해 알아볼 것이다.

다음에는 express-fileupload를 사용해봐야지.