NodeJS - File Upload

---

목차

1. multer

2. axios 사용하여 파일 업로드 해보기

 

---

 

 

 

1. multer

 

- input box에서 file로 첨부파일을 올리고 submit 했을때 요청바디가 달라져서 새로운 바디 파서를 장착해야한다.

- BodyParser를 해주는 middleware로 'multer'

 

<form method="post" action="" enctype="multipart/form-data">
    <input type="text" name="userid" />
    <input type="password" name="userpw" />
    <input type="text" name="username" />
    <input type="file" name="upload1" />
    <button type="submit">전송</button>
</form>

npm install multer

const multer = require("multer");

const upload = multer({
    storage: multer.diskStorage({
        destination: (req, file, done) => {
            done(null, "./uploads");
        },
        filename: (req, file, done) => {
            const ext = path.extname(file.originalname);
            const filename =
                path.basename(file.originalname) + "_" + Date.now() + ext;
            done(null, filename);
        },
    }),
});

app.use(express.static("uploads"));

app.post("/upload", upload.single("upload1"), async (req, res) => {}

 

 

- upload.single() 미들웨어가 req.file을 만들고 그 정보를 객체로 보여준다.

{
  fieldname: 'upload1',
  originalname: 'img.png',
  encoding: '7bit',
  mimetype: 'image/png',
  buffer: <Buffer 89 50 e9 00 01 00 58 ... 571991 more bytes>,
  size: 572041
}

 

 

-  multer() 설정으로 어디에 저장할건지, 파일이름까지 정해주고 실행한다면

- 설정한 내용까지 포함해서 알려준다!!

{
  fieldname: 'upload1',
  originalname: 'img.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: './uploads',
  filename: 'img_1698631459304.jpg',
  path: 'uploads\\img_1698631459304.jpg',
  size: 4085635
}

 

 

달라진 content-type

달라진 페이로드

 

 

 

 

2. axios 사용하여 파일 업로드 해보기 ( → 비동기로 back에서 파일 저장 )

 

- front, back 서버를 나누고 server 세팅을 한다.

     - front : 3000 /  npm install express nunjucks multer

     - back : 4000 / npm install express multer cors dotenv mysql2 sequelize

 

 

- front 

   - index.html 안에 form 태그 사용하여 input type="file" , button type="submit" 만들기

   - script에  addEventListener를 사용하여 submit이 됐을때의 이벤트처리를해준다.

      - form에 입력된 값을 formData 에 담아서 백엔드서버에 axios.post() 요청을 보낸다.

      - 백엔드서버에서 받은 값 (data) 에서 사용할것만 뽑아서 id, name, img DOM조작으로 html에 뿌려준다.

 

const formData = new FormData(e.target);
// console.log(formData);

const {data} = await axios.post(
    "http://localhost:4000/upload", formData
);
console.log(data);

 

 

 

- back

   - DB connection (entity, db)

   - Schema ( id, pw, name, provider, image, original_filename )

   -  프론트에서 보낸 요청을 처리할 라우터를 작성한다. 

       - app.post("/upload", upload.single("upload1"), async (req, res) => {}

   - 요청받은 데이터를 userEntity에 담아 DB에 create() INSERT해준다.

   - 응답으로 DB에 담긴 User의 data와 imageURL을 함께 JSON으로 보낸다.

 

 

 

 

※ 추가로 작업해볼 내용

- 회원가입

- 로그인 (카카오로그인처럼 token , cookie )

- 유저의 모든정보를 DB에 ( 이미지까지! )