HTML5 Blob.slice() 메서드 활용법: 특정 범위의 Blob 데이터 다루기

HTML5의 Blob.slice() 메서드는 원본 Blob 객체에서 지정된 바이트 범위에 해당하는 데이터를 담은 새로운 Blob 객체를 생성할 때 유용하게 사용됩니다. 대용량 파일을 여러 조각으로 나누어 업로드하거나, 파일의 특정 부분만 필요로 하는 경우에 이 메서드를 활용할 수 있습니다.

Blob.slice() 메서드란?

slice() 메서드는 시작 위치(start)와 종료 위치(end)를 인자로 받아, 원본 Blob의 해당 범위에 있는 데이터만을 새로운 Blob으로 반환합니다. 기본 문법은 다음과 같습니다.

blob.slice(start, end, contentType)

예제: POST 방식으로 Blob 데이터 전송하기

다음 예제는 slice()를 활용해 텍스트 데이터를 담은 Blob을 생성하고, XMLHttpRequest의 POST 방식을 통해 서버로 전송하는 방법을 보여줍니다.

var val = new XMLHttpRequest();
val.open("POST", url, true);
val.onload = function (event) {
};
var blob = new Blob(['demo'], {type: 'text/plain'});
val.send(blob);

위 코드는 'demo'라는 텍스트를 포함하는 Blob 객체를 생성한 뒤, 이를 요청 본문에 담아 지정된 URL로 전송합니다. onload 콜백 함수 내부에는 서버로부터 받은 응답을 처리하는 로직을 작성할 수 있습니다.

이처럼 Blob.slice()와 XMLHttpRequest를 함께 사용하면 클라이언트 측에서 바이너리 데이터를 손쉽게 생성하고 전송할 수 있으며, 파일 분할 업로드나 스트리밍 처리 등 다양한 시나리오에 응용할 수 있습니다.