[Node.js] 서버에서 클라이언트로 파일 전송하기

저번 글에서 클라이언트에서 formData를 통해 서버로 파일을 보내고 저장하는 법을 알아보았다

 

 

이번에는 서버에서 클라이언트로 파일을 보내고 읽는방법에 대해 알아보겠다.

 

 

우선 express로 구성된 node.js에 이미지 파일들이 저장되어 있다고 생각해보자.

 

이때 res를 이용하면 파일을 보낼 수 있다.

 

 

//파일 이미지 받아오기
app.post("/getImage", async (req, res) => { 

  const file = fs.readFileSync(`uploads/${req.body.filename}`);
  res.writeHead(200, { "Context-Type": "image/jpg" });
  res.write(file);
  res.end();
});

 

 

헤더를 이미지타입으로 정의하고, 파일을 fs모듈을 통해서 읽은 후에, 보내주면 된다.

 

 

혹은, express에 내장된 sendFile 함수를 이용하면 보다 간편하게 보낼 수 있다.

 

 

//파일 이미지 받아오기
app.post("/getImage", async (req, res) => {
  res.sendFile(path.join(__dirname, `./uploads/${req.body.filename}`));
});

 

 

POSTMAN 으로 확인하면 파일 전송이 잘 이루어졌음을 확인할 수 있다.

 

 

파일을 받긴 했는데, 이 받은 파일들을 디스플레이에 표시하기 위해서는 추가적인 작업이 필요하다.

 

해당 이미지파일은 이미지 파일이기때문에, json 형식으로 받으면 에러를 표시하게 된다.

 

 

또한, 이미지파일을 표시하기 위해서는 url형태로 바꾸는것이 좋기에 이전에 사용했던 blob을 이용할 것이다.

 

 

//filename으로 이미지 다운로드
export const getImageApi = async (parem: type.getImageApiType) => {
  const response = await fetch(url + "/getImage", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(parem),
  });
  
  //파일을 blob으로 바꿈
  const blob = await response.blob();
  
  
  return blob;
};

위와같이 코드를 짜면, 파일이름을 parem으로 전송하여 그 이미지를 blob 형태로 받을 수 있게 된다.

 

 

//blob을 임시 url로 생성한다.
  const imageObjectURL = URL.createObjectURL(blob);

그 이후에 URL.createObjectURL을 사용하면, 현재브라우저에서만 사용가능한 임시 url이 생성된다.

 

이렇게 만들어진 url을 활용하면, img태그를 활용해 브라우저 이미지를 띄우는것이 가능하다.

 

 

 

이때 유의할 점이 있다.

 

URL.createObjectURL로 만들어진 주소는 임시주소이기에, 생성만 해준다면 메모리 누수가 생길 수 있다.

 

URL.revokeObjectURL(url);

따라서 url의 사용이 다 마무리되면, 이를 메모리에서 없애주는 과정이 필요하다.