[Axios] json이 아닌 파일통신 받는 법

개요

파일 다운로드 기능을 개발하였다.

스펙은 다음과 같다. vue.js2, javascript, axios, file-saver 라이브러리

다운로드를 하게는 만들었는데, 파일을 열어보면, 열리지 않았다. 서버 api는 stream을 내려준다.

서버 개발자가 api를 호출하면 바로 파일이 다운로드 될거라고 했는데, 그렇지 않았다.

 

 

원인

axios 요청응답에 responseType을 지정해주지 않았기 때문이다. 

responseType default value는 json이다.

You can configure the type of the data property using Axios' responseType object.
By default, responseType is set to 'json'
, which means Axios will try to parse the response as JSON.

However, that isn't correct if you're looking to, say, download an image using Axios.
You can set responseType to 'arraybuffer' to get the response as an ArrayBuffer:

 

해결방법

서버에서 넘어오는 응답이 stream 타입이었다. bufferArray로 받으니까 정상적으로 다운받은 파일을 열어볼 수 있었다. 

/**
 * @description
 * 자료 다운로드
 * @params id 23,
 */
export const downloadMaterialFileApi = async (id, name) => {
  const result = await apiRequest({
    url: `${process.env.VUE_APP_DOMAIN}/ma/${id}/file`,
    responseType: "arraybuffer", 👈 이부분 추가해주니까 다운로드 정상으로 먹힌다.
  });

  saveAs(new Blob([result]), materialName);
};

 

 

 

 

참고: https://masteringjs.io/tutorials/axios/response-body

Get the HTTP Response Body with Axios

streaming 부분을 보면 된다.