[Error] Sharp - Error: Input file is missing / Error: Input buffer contains unsupported image format + Axios로 파일 통신 받을 때 생기는 오류

 

 

npm sharp란?

출처: https://www.npmjs.com/package/sharp

NodeJS에서 이미지를 resize하고 싶을 때 자주 사용하는 라이브러리는 sharp라고 할 수 있다.

Weekly Downloads가 100만이 넣을 정도로 많은 개발자들이 사용한다.

 

이미지를 Resizing 해줄 뿐만 아니라 Compositing 등 이미지에 한해서는 다양한 기능이 있다.

궁금한 사람들은 아래 공식 문서를 보길 추천한다.

https://sharp.pixelplumbing.com/

sharp - High performance Node.js image processing

 

 

문제 시나리오

나의 경우 DB에 저장된 이미지를 A라는 서비스가 B 서비스로 보낼 때 문제가 생겼다.

너무 간단하게 말하는 것 같아 코드를 보면서 이야기하자.

 

axios
  .get(url입력)
  .then((response) => {
  // 예상대로라면 response.data에는 buffer가 들어간다
      sharp(response.data)
        .resize(100)
        .toBuffer()
        .then((data) => {
          console.log("data: ", data);
        })
        .catch((err) => {
          console.log("err: ", err);
        });
  })
  .catch((error) => {
    console.log(error);
  });

Axios를 이용해서 A 서비스에 문을 두들려서 response를 받아왔다.

A 서비스는 response.data에 이미지의 buffer을 보내주고 sharp에 해당 buffer을 넣어 resize를 시켜준 다음 다시 buffer로 전환시켰다!

 

시나리오는 좋았다.. 하지만 예상과 달리 buffer가 아닌 Error: Input file is missing라는 에러 코드가 나왔다.

 

이 에러 코드를 보고 나서 스스로 생각했을 때 혹시 A라는 서비스가 실은 utf-8로 전환하여 보내주기 때문에 에러가 난 것은 아닐까 생각했다.

let datas = Buffer.from(response.data);

그래서 buffer로 변환해주는 코드를 추가해줬고 datas를 sharp에 넣었다.

그랬더니 이번에는 Error: Input buffer contains unsupported image format 에러가 나왔다.

아무리 공식 문서, 공식 GitHub 등 여러 문서를 찾아봐도 문제를 해결 할 수 없었다.

 

 

해결방법 - responseType: "arraybuffer"

axios
  .get(url입력, {
    responseType: "arraybuffer",
  })
  .then((response) => {
  	...
  }

결국 사수님께 도움을 요청했고 사수님께서는 잠깐 보시더니 Axios에 { responseType: "arraybuffer" }를 넣어보라고 하셨다!

Axios를 사용하면서 한 번도 이런 코드를 본 적이 없었는데..

 

공식문서에 들어가서 구성옵션을 보니 responseType이 json으로 기본값 설정이 되어 있었다. 

그렇기 때문에 이미지나 파일을 잘 전달 받을려면 bufferArray로 설정을 변경해야 했다.

즉, 앞에 나온 오류들은 sharp의 문제가 아닌 axios의 문제였던 것이다.

 

 

그 결과 위와 같이 sharp가 잘 동작하면서 8934 bytes가 1189 bytes가 되었다.

Axios로 통신하면서 파일을 주고 받아야 한다면 언제든지 만날 수 있는 오류이기 때문에 포스팅했다.

 

처음 이 오류를 만났을 때 당연히 sharp에서 무언가를 해주어야 한다고 생각했다.

하지만 axios의 문제였는데 그걸 파악하지 못해 시간을 잡아먹어 속상하기도 했다.

(솔직히 말하면 해결이 안되서 화가 났다.. 🤬)

 

그래도 이렇게 글을 쓰며 다시 복기해보니 다음부턴 이런 실수는 하지 않을 것 같다.

여러분들한테도 도움이 되었으면