HTML5 Blob.slice() 메소드란? 개념부터 활용 예제까지

HTML5의 Blob.slice() 메소드는 원본 Blob 객체에서 지정된 바이트 범위에 해당하는 데이터만 추출하여 새로운 Blob 객체를 생성하는 기능입니다. 대용량 파일을 여러 조각으로 나누어 처리하거나 업로드해야 할 때 특히 유용하게 활용됩니다.

Blob.slice() 기본 문법

blob.slice(start, end, contentType)

start: 잘라낼 시작 위치입니다. 바이트 단위이며, 음수 값을 지정하면 Blob의 끝에서부터 역순으로 계산됩니다.
end: 잘라낼 끝 위치입니다. 이 값 자체는 범위에 포함되지 않습니다.
contentType: 새롭게 생성되는 Blob의 MIME 타입입니다. 생략하면 빈 문자열('')이 설정됩니다.

slice()로 이진 데이터 전송하기

다음 예제는 slice()를 활용해 텍스트 데이터를 담은 Blob 객체를 생성한 뒤, 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);

대용량 파일 분할 업로드에 활용하기

Blob.slice()의 가장 대표적인 활용 사례는 청크(chunk) 단위 파일 업로드입니다. 수백 MB 이상의 큰 파일을 한 번에 전송하면 네트워크 오류 시 처음부터 다시 올려야 하는 문제가 발생하지만, slice()로 파일을 적절한 크기로 나누어 순차적으로 전송하면 실패한 구간만 재전송할 수 있어 안정성과 효율성이 크게 향상됩니다.

var file = document.querySelector('input[type="file"]').files[0];
var chunkSize = 1024 * 1024; // 1MB씩 분할

for (var i = 0; i < file.size; i += chunkSize) {
  var chunk = file.slice(i, i + chunkSize);
  // 각 청크를 서버로 전송하는 코드 작성
}

이처럼 Blob.slice()는 파일 API와 함께 사용하면 클라이언트 측에서 데이터를 세밀하게 제어할 수 있는 강력한 도구입니다.