이미지 업로드

프론트

      <Form.Control
        type="file"
        className="shadow-none"
        accept="image/*"
        onChange={(e) => {
          FileUpload(e);
        }}></Form.Control>

form 을 작성한다 input type은 file , accept 는 'image/*' (이미지 업로드 허용한다는 뜻임) audio,나 video도 가능함

 const FileUpload = (e) => {
    console.log(e.target.files);
    }

change 이벤트로 e.target.files 찍어보면 

 

 

---

---

서버

import express from "express";
import { upload } from "../controller/uploadController.js";
const router = express.Router();
router.post("/", upload);
export default router;

post 요청

server.use("/uploads", express.static("uploads"));

uploads 폴더만들고 정적인폴더는 static을 사용한다(이폴더에 이미지 저장예정)

npm i multer

https://www.npmjs.com/package/multer?activeTab=readme

multer

multer 라이브러리 설치

import multer from "multer";
// multer 라이브러리를 이용한 파일업로드
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "uploads/");
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, uniqueSuffix + "_" + file.originalname); //file.originalname 가 뒤편에 오게끔 수정
  },
});

const fupload = multer({ storage: storage }).single("file"); //변수명 임의로 지정

export function upload(req, res) {
  fupload(req, res, (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log(res.req.file.path);
      res.json(res.req.file.path);
    }
  });
}

---

---

프론트

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const formDataObject = {};
    formData.forEach((val, key) => {
      formDataObject[key] = val;
    });
    alert(JSON.stringify(formDataObject));
    //post --> axios
    axios({
      method: "post",
      url: "http://127.0.0.1:8000/products/new/",
      data: formDataObject,
    })
      .then((result) => {
        if (result.data === "ok") {
          alert("새로운 제품이 등록되었습니다.");
        }
      })
      .catch((error) => {
        console.log("요청실패");
        console.log(error);
      });
  };