Message body를 통한 데이터 전송

서정준·2022년 7월 3일

※ 데이터 전송을 위해 사용된 환경.

Node.js 환경.
template engine으로 pug를 이용.

HTML Form 데이터를 POST 방식으로 전송

client 부분 (file name: home.pug)

form에서 method 속성을 "POST"로, enctype을 "multipart/form-data"로 지정합니다.
태그의 enctype 속성은 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시합니다. 이 속성은 요소의 method 속성값이 “post”인 경우에만 사용할 수 있습니다.
multipart/form-data 모든 문자를 인코딩하지 않음을 명시함.
이 방식은 요소(element)가 파일이나 이미지를 서버로 전송할 때 주로 사용함.

doctype html
html(lang="ko")
 
  form(method="POST", enctype="multipart/form-data")
      label(for="avatar") Avatar
      input(type="file", id="avatar", name="avatar", accept="image/*")
      input(type="submit", value="Update Profile")

server 부분

multipart/form-data 파일을 다루고, 파일을 업로드 하기 위해 Multer middleware를 사용합니다.

https://www.npmjs.com/package/multer
아래 예시에서 form을 통해 전송된 파일은 images 폴더에 저장됩니다.
imges 폴더가 express.static을 통해 정적 폴더임을 명시해 줍니다.

  	app.use("/images", express.static("images"));

위의 HTML 코드에서 input name과 아래 server코드에서 multer middleware의 fieldname이 같아야 합니다. 이 코드에서 input name과 fieldname이 "avatar"로 같습니다.

	imgUpload.single("avatar")

import express from "express";
import multer from "multer";

const app = express();
const imgUpload = multer({
    dest: "images", // 파일이 저장 될 폴더.
    limits: {
      fileSize: 10000000,
    },
});

// template engine으로 pug를 사용할 것을 명시함.
app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views");
// images 폴더가 정적 폴더임을 명시해준다.
app.use("/images", express.static("images"));
app.route("/").get(
    (_, res)=>{
        return res.render("home")
    }
).post(imgUpload.single("avatar"),
    (req, res) => {
        console.log(req.file);
  		/*
  			출력값.
  			html form에서 전송한 데이터가 Multer middleware를 거치면서 아래와 같이 변형 되었다.
            {
                fieldname: 'avatar',
                originalname: 'ë¹\x84ë\x94\x94ì\x98¤ í\x99\x94ë©´.PNG',      
                encoding: '7bit',
                mimetype: 'image/png',
                destination: 'images',
                filename: '4bdad1ed9d3170884b39128dd293f654',
                path: 'images\\4bdad1ed9d3170884b39128dd293f654',
                size: 1232665
              }
         */
        return res.redirect("/");
    }
);

const handleListening = () =>
  console.log(`✅ Server listenting on http://localhost:5000 🚀`);
app.listen(5000, handleListening);

HTTP API 데이터 전송

html 부분

doctype html
html(lang="ko")
    body
        input.input__file(type="file", accept="image/*")
    script(src="/public/js/home.js")

client부분 (JavaScript)

HTML에서 form element를 사용하는 대신 JavaScript에서 FormData 객체를 만들어 server에 데이터를 전송.
- FormData는 폼을 쉽게 보내도록 도와주는 객체입니다. 이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다.
폼을 전송할 때 HTTP 메시지의 Content-Type 속성은 항상 multipart/form-data이고 메시지는 인코딩되어 전송됩니다.

const input = document.querySelector(".input__file")

async function handleSubmit(event){
    const file = event.srcElement.files[0]
    const formData = new FormData();
    formData.append("avatar", file)

    await fetch("/", {
        method: "POST",
        body: formData,
      }).catch(console.error);
}

input.addEventListener("change", handleSubmit)