서버에서 ByteArray 형태의 응답을 내려주는 경우에 파일을 처리하는 방법을 정리합니다.
서버 응답 예시
아래와 같이 ByteArray 형태로 파일을 응답하는 API가 존재한다고 가정합니다.
@GetMapping
fun download(@RequestParam key: String): ResponseEntity<ByteArray> {
val file = fileService.download(key)
return ResponseEntity.ok()
.contentType(MediaType.parseMediaType(file.contentType))
.contentLength(file.contentLength)
.body(file.content)
}
프론트에서의 처리
프론트에서 해당 Byte Array를 받아 처리하려고 하는데 응답을 받아 Blob에 대해 처리하는 부분이 잘 동작하지 않았습니다.
조금 찾아보니 axios의 기본 responseType 처리가 json이라 별도의 responseType을 설정해주어야 합니다.
responseType: 'json', // default
get 요청 시 아래와 같이 responseType을 지정해줍니다.
axios.get(this._url, {
responseType: 'blob'
})
받은 응답값은 아래와 같이 활용해 Blob을 생성할 수 있습니다.
Blob을 생성한 뒤 window.URL.createObjectURL을 호출해 url을 반환받아 활용하면 됩니다.
export interface FileData {
data: Blob;
contentType: string;
}
await res = s3FileStore.fetchS3Download(employee.imageUrl) // return FileData
const blob = new Blob([res.data], { type: res.contentType });
const url = window.URL.createObjectURL(blob);
setProfileImage(url);