[EJS][JQuery] DB 정보 수정하기(이미지와 다른 데이터 분리)

form 에는 put 메소드가 없다

클라이언트

<script>
      let id = "<%=data.id%>";
      function goodsModify() {
        let seller = $("#seller").val();
        let goodsname = $("#goodsname").val();
        let explain = $("#explan").val();
        let quantity = $("#quantity").val();
        let price = $("#price").val();
        $.ajax({
          type: "PUT",
          url: `/management/goods/modify/${id}`,
          contentType: "application/json",
          dataType: "json",
          data: JSON.stringify({
            seller: seller,
            goodsname: goodsname,
            explain: explain,
            quantity: quantity,
            price: price,
          }),
          success: function (response) {
            alert("수정 성공");
          },
        });
      }
    </script>

form 에는 put method가 없어 다른 데이터와 다르게 보내야 한다.

다른 데이터는 JQuery ajax를 통해 보내고 이미지는 form으로 보내는 방식으로 따로 보내게 했다

ajax로 이미지 보내는 방법도 있었는데 사용하기가 쉽지가 않았다

<section class="mainsection">
      <div>상품 조회 및 수정 페이지</div>
      <div class="goods_form">
        <img style="width: 300px; height: 180px" src="/<%=data.image%>" /><br />
        <input type="text" id="seller" value="<%=data.seller%>" />
        <input type="text" id="goodsname" value="<%=data.goodsname%>" />
        <input type="text" id="explain" value="<%=data.explain%>" />
        <input type="number" id="quantity" value="<%=data.quantity%>" />
        <input type="number" id="price" value="<%=data.price%>" />
        <button onclick="goodsModify()">수정하기</button>
      </div>
      <form
        action="/management/goods/modify/image/<%=data.id%>"
        method=""
        enctype="multipart/form-data"
      >
        <div>
          <input type="file" name="image" id="image" />
          <button type="submit">이미지수정</button>
        </div>
      </form>
    </section>

서버

router.put("/goods/modify/:id", managerController.goodsModify);

router.post(
  "/goods/modify/image/:id",
  upload.single("image"),
  managerController.goodsImgModify
);

상품 정보는 put 메소드로 보내고

상품 이미지는 post로 보내기로 했다

// 상품 수정
  goodsModify = async (req, res) => {
    try {
      const { seller, goodsname, explain, quantity, price } = req.body;
      const goodsId = req.params.id;
      console.log(req.body.seller);
      console.log(goodsId);
      const goodsModifyData = await this.managerService.goodsModify(
        seller,
        goodsname,
        explain,
        quantity,
        price,
        goodsId
      );
    } catch (err) {
      console.log(err);
      res.status(400).json({ errorMessage: "요청 실패" });
    }
  };

  goodsImgModify = async (req, res) => {
    try {
      const goodsId = req.params.id;
      const image = req.file.path;
      console.log(image);
      const goodsImgData = await this.managerService.goodsImgModify(
        image,
        goodsId
      );
    } catch (err) {}
  };

실제 DB에 들어가는 정보는 이미지의 경로이다.