동적form과 비동기통신 | node.js

<form name="form">
  <input type="file" name="userfile1" multiple/><br />
  <input type="text" name="title1" /><br />
  <button type="button" onclick="sendForm()">업로드</button>
</form>

//front
<form action="/upload/fields" method="post" enctype="multipart/form-data">
  <input type="file" name="userfile1"  /><br />
  <input type="text" name="title1" /><br />
  <button type="submit">업로드</button>
</form>

//back
const express = require("express");
const multer = require("multer");
const path = require("path");
const app = express();
const PORT = 8000;

//ejs
app.set("view engine", "ejs");
app.use("/uploads", express.static(\_\_dirname + "/uploads"));

..생략...
app.get("/", (req, res) => {
res.render("dinamic");
});

const uploadDetail = multer({ storage: multer.diskStorage({ destination(req, file, done) {
  done(null, "uploads/"); }, filename(req, file, done) {
const ext = path.extname(file.originalname);
done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
}),
limits: { fileSize: 5 _ 1024 _ 1024 }, // 5\* 2^10 = 5KB
});

app.post("/upload/fields",uploadDetail.single("userfile"),

  function (req, res) {
    console.log(req.file);
    console.log(req.body);
    res.send(req.file);
    }
);
...생략...

//.array()
app.post("/upload/array", uploadDetail.array("userfile"),
function (req, res) {
    res.send("Upload!!");
});

//.fields()
app.post( "/upload/fields",
uploadDetail.fields([{ name: "userfile1" }, { name: "userfile2" }]),
function (req, res) {
    res.send("Upload!!");
      }

);

// front- html
...생략...
<fieldset>
    <legend>관심사</legend>
    <input type="checkbox" name="hobby" id="travle" value="여행" />
    <label for="travle">여행</label>
    <input type="checkbox" name="hobby" id="fashion" value="패션" />
    <label for="fashion">패션</label>
    <input type="checkbox" name="hobby" id="food" value="음식" />
    <label for="food">음식</label>
  </fieldset>

// front- 자바스크립트
<script>
  const form = document.forms["register"];
  const formId = document.getElementById("register");
  const hobby = [];
  const resultBox = document.querySelector(".result");

  function axiosGet() {
    const checked = formId.querySelectorAll(
      'input[type="checkbox"]:checked'
    );
    checked.forEach((elem) => {
      hobby.push(elem.value);
    });
    console.log("hobby", hobby);
  }
  const data = {  //전송하기 위해 데이터에 담기
      name: form.name.value,
      gender: form.gender.value,
      year: form.year.value,
      month: form.month.value,
      day: form.day.value,
      hobby,
    };
    ...이하생략...

"back- node.js"
...생략...
//axios

app.get("/axiosGet", (req, res) => {
console.log("back", req.query);
res.send(req.query);
});

hobby: [...form.querySelectorAll("input[name=hobby]:checked")]
.map((input) => input.value)
.join(", "),

// front- 자바스크립트
<script>
  ...생략...
  let flag = 0;
  let username = "";
  let userpw = ""; //전역변수로 설정

  function axiosPost() {
    console.log("axios post");
    const data = {
      name: form.name.value,
      password: form.password.value,
      flag,
    };

    function result1() {
      return axios({
        method: "POST",
        url: "/axiosPost",
        data,
      }).then((res) => {
        resultBox.textContent = `회원가입이 완료되었습니다. 다시 로그인해주세요. `;
        resultBox.style.color = "green";
        flag = 1;
        console.log("실행완료1", flag, username, userpw);
        return;
      });
    }

    function result2(username, userpw) {
      return axios({
        method: "POST",
        url: "/axiosPost",
        data,
      }).then((res) => {
        console.log("실행완료2");
        if (res.data.name != username && res.data.password == userpw) {
          resultBox.textContent = `아이디를 다시 입력하세요`;
          resultBox.style.color = "red";
          console.log("실패", res.data.name); }
                ...생략...
        else {
          resultBox.textContent = `로그인 성공`;
          resultBox.style.color = "blue";
          console.log("성공", res.data.name, res.data.password);
        }
      });
    }
    if (username == "" || userpw == "") {
      //전역변수가 빈 값이면 result1함수 실행
      username = data.name;
      userpw = data.password;
      result1();
    } else {
      //위 조건이 아니면 result2함수에 전역변수 넣어서 실행
      result2(username, userpw);
      console.log("result2실행", username, userpw);
    }
  }
</script>

// back- node.js
app.post("/axiosPost", (req, res) => {
if (req.body.flag === 0) {
res.send("");
console.log("flag", req.body.flag);
console.log("실행1");
} else {
res.send(req.body);
console.log("실행2");
}
console.log("back", req.body);
});

// body-parser
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

...생략...

//front

<body>
<h1>동적 파일 업로드</h1>
<input type="file" name="userfile" id="userfile1" /><br />
<button type="button" onclick="dinamicFile()">업로드</button><br />
<img src=" " width="200px" />
<script>
  async function dinamicFile() {
    const formData = new FormData();
    const file = document.querySelector("#userfile1");
    formData.append("userfile", file.files[0]); //키,밸류
    console.log("file", file);
    console.log("file.file", file.files);

    const res = await axios({
      method: "POST",
      url: "/upload/dinamic",
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    if (res.data) {
      console.log(res.data);
      console.log(res.data.path);
      document.querySelector("img").src = res.data.path;
      alert("파일업로드 완료");
    }
  }
</script>

</body>

//back
const multer = require("multer");
const path = require("path");

//ejs
app.set("view engine", "ejs");
app.use("/uploads", express.static(__dirname + "/uploads"));

app.get("/", (req, res) => {
  res.render("dinamic");
});

const uploadDetail = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      done(null, "uploads/");
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname);
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 },
  // 5* 2^10 = 5KB
});

app.post(
  "/upload/dinamic",
  uploadDetail.single("userfile"),
  function (req, res) {
    console.log(req.file);
    console.log(req.body);
    res.send(req.file);
  }
);