[node.js] multer,fetch를 활용한 파일 업로드

multer,fetch를 활용한 파일 업로드를 구현해 보겠다.

 

https://maximorlov.com/fix-unexpected-field-error-multer/

Fix "Unexpected field" Error From Multer

http://daplus.net/javascript-js-fetch-api%EB%A1%9C-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%A9%EB%8B%88%EA%B9%8C/

[javascript] JS fetch API로 파일을 어떻게 업로드합니까? - 리뷰나라

내용을 이해하는데 위 두 글이 크게 도움이 되었다.

 

 

 

우선 필요한 라이브러리들을 설치해주자.

$ npm install --save body-parser
$ npm install --save multer

 

그 후, 라이브러리들을 express에 연결해준다.

const bodyParser = require("body-parser");
const multer = require("multer");

 

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

 

 

 

 

 

app.js 에

 

const upload = multer({ dest: "./uploads/" });

다음과 같은 코드를 추가한다.

 

코드의 의미는 multer의 세팅을 하는 것이다. dest는 받아온 파일들을 저장할 위치라는 의미이며, 이 외에도 여러가지 세팅이 있다. 파일의 크기제한이나, 확장자등의 제한을 걸 수도 있다.

 

 

 

이제 api를 받을껀데, 가장중요한건 포맷이다. 우선 아래 코드를 한번 유심히 보자.

app.post("/api", upload.single("files"), async (req, res) => {
  console.log(req.files);
  console.log(req.body);
});

 

 

위 코드의 의미는 files란 이름의 파일을 한개만 받는다는 의미이다.

 

아까 선언해 두었던 upload를 api 함수의 두번째 인자로 넣는것을 알 수 있다.

 

이렇게 받아온 파일들은 req.files에 담겨지며, 나머지 정보들은 req.body에 넣어지게 된다.

 

 

 

 

 

 

 

 

그렇다면 이 정보들을 프론트부분에서 어떻게 넣어주는지 살펴보자.

 

 

 

export const api = async (files) => {
  const formData = new FormData();

  formData.append("user", "mingyu");  

  for (const file of files) {
    console.log(file.name);
    formData.append("files", file, file.name);
  }

  await fetch(`${url}/api`, {
    method: "POST",
    body: formData,
  });
};

 

위와같이 담아주면 된다. 조금 더 자세히 설명하자면

 

1. formData란 객체를 생성

2. 파일이 아닌 데이터들은 append를 통해서 바로바로 담아줌

3. 파일인 데이터들도 담아주는 포맷도 같다. 단, 파일 여러개를 담고싶다면 위처럼 for문을 사용

4. append의 첫번째 인자가 'name'이로 되어있는데 이는 express의 name과 꼭 동일하게 맞춰주어야 한다.

 

 

다시 express의 코드를 살펴보자.

app.post("/api", upload.single("files"), async (req, res) => {
  console.log(req.files);
  console.log(req.body);
});

files란 이름이 서로 맞춰져 있음을 알 수 있다. 하지만 위코드의 경우 프론트단의 파일을 받을 수 없다.

 

single("") 은 하나의 파일만 받을 수 있기 때문, 여러개의 파일을 받고싶다면,

 

app.post("/api", upload.array("files", 10), async (req, res) => {
  console.log(req.files);
  console.log(req.body);
});

위처럼 array 함수를 사용해야 한다. 이때 최대로 받을 수 있는 파일의 개수를 정해줄 수 있다.

 

 

참고로 postmen을 활용하면 보다쉽게 api테스트를 할 수 있다!