Blob 를 이용 하여 파일 업로드 의 전체 절 차 를 진행 합 니 다.

Blob
Blob,Binary Large Object 의 줄 임 말,바 이 너 리 형식의 큰 대상 은 바 꿀 수 없 는 원본 데 이 터 를 의미 합 니 다.
컴퓨터 에서 BLOB 는 데이터베이스 에 바 이 너 리 파일 을 저장 하 는 필드 형식 입 니 다.
Blob 기본 용법
Blob 개체
Blob 대상 은 바이트 시퀀스 를 말 하 며 size 속성 을 가지 고 있 으 며 바이트 시퀀스 의 바이트 총수 와 type 속성 을 말 합 니 다.소문 자 ASCII 인 코딩 문자열 이 표시 하 는 미디어 형식 바이트 시퀀스 입 니 다.
size:바이트 수로 바이트 시퀀스 의 크기 를 되 돌려 줍 니 다.가 져 올 때 요구 에 부 합 된 사용자 에이 전 트 는 FileReader 나 FileReaderSync 대상 이 읽 을 수 있 는 총 바이트 수 를 되 돌려 야 합 니 다.Blob 에서 읽 을 바이트 가 없 으 면 0 으로 되 돌려 줍 니 다.
type:소문 자 ASCII 인 코딩 문자열 은 미디어 형식 Blob 를 표시 합 니 다.가 져 올 때 사용자 에이 전 트 는 Blob 에서 a 형식의 ASCII 인 코딩 문자열 을 소문 자로 되 돌려 야 합 니 다.이렇게 하면 바이트 시퀀스 로 변 환 될 때 분석 가능 한 MIME 형식 이거 나 빈 문자열(0 바이트)의 형식 이 확실 하지 않 습 니 다.
구조 함수
blob 대상 을 만 드 는 것 은 본질 적 으로 다른 대상 을 만 드 는 방식 과 같 습 니 다.모두 Blob()의 구조 함 수 를 사용 하여 만 듭 니 다.구조 함수 가 두 개의 인 자 를 받 아들 입 니 다:
첫 번 째 매개 변 수 는 데이터 시퀀스 입 니 다.형식 은 Array Buffer,Array BufferView,Blob,DOMString 일 수 있 습 니 다.
두 번 째 매개 변 수 는 다음 과 같은 두 가지 속성 을 포함 하 는 대상 이다.

type:MIME 타 입,

endings:첫 번 째 매개 변수의 데이터 형식 을 결정 합 니 다.기본 값 은'transparent'입 니 다.줄 끝 문자 n 을 포함 하 는 문자열 을 어떻게 쓰 는 지 지정 합 니 다.이것 은 다음 두 값 중 하나 입 니 다."native"는 줄 끝 자 를 숙주 운영 체제 파일 시스템 에 적합 한 줄 바 꿈 문자 로 변경 합 니 다."transparent"는 blob 에 저 장 된 끝 자 를 그대로 유지 하 겠 다 는 뜻 입 니 다.

 var data1 = "a";
 var blob1 = new Blob([data1]);
 console.log(blob1); //  ：Blob {size: 1, type: ""}
 
 var debug = {hello: "world"};
 var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});
 console.log(blob) //    Blob(22) {size: 22, type: "application/json"}
 
 //     8   ArrayBuffer，              2   “  ”
 var abf = new ArrayBuffer(8)
 var abv = new Int16Array(abf)
 var bolb_ArrayBuffer = new Blob(abv, {type : 'text/plain'})
 console.log(bolb_ArrayBuffer) //   Blob(4) {size: 4, type: "text/plain"}

slice 방법
Blob 대상 은 새로운 Blob 대상 을 되 돌려 주 는 slice 방법 이 있 습 니 다.원본 Blob 대상 에서 지정 한 범위 내의 데 이 터 를 포함 합 니 다.

slice(start, end, contentType)

start:Blob 의 아래 표 시 를 선택 할 수 있 습 니 다.첫 번 째 는 새로운 Blob 바이트 의 시작 위치 에 복사 되 는 것 을 의미 합 니 다.만약 들 어 오 는 것 이 음수 라면,이 편 이 량 은 데이터 의 끝에서부터 끝까지 계 산 될 것 이다.
end:선택 할 수 있 습 니 다.Blob 의 아래 표 시 를 대표 합 니 다.이 아래 표 시 는-1 의 대응 하 는 바이트 가 새로운 Blob 에 복사 되 는 마지막 바이트 가 될 것 입 니 다.만약 당신 이 음수 가 들 어 왔 다 면,이 오프셋 은 데이터 의 끝 에서 부터 앞 까지 계산 할 것 입 니 다.
contentType:선택 할 수 있 습 니 다.새로운 Blob 에 새로운 문서 형식 을 부여 합 니 다.이것 은 type 속성 을 들 어 오 는 값 으로 설정 합 니 다.기본 값 은 빈 문자열 입 니 다.

var data = "abcdef";
var blob1 = new Blob([data]);
var blob2 = blob1.slice(0,3);

console.log(blob1); //  ：Blob {size: 6, type: ""}
console.log(blob2); //  ：Blob {size: 3, type: ""}

slice 는 파일 분할 업로드 에 사 용 됩 니 다.

조각 과 병발 을 결합 시 켜 하나의 큰 파일 을 여러 조각 으로 나 누 어 동시에 업로드 하여 큰 파일 의 업로드 속 도 를 크게 향상 시킨다.

네트워크 문제 로 전송 오류 가 발생 했 을 때 전체 파일 이 아 닌 오 류 를 다시 전송 해 야 합 니 다.또한 필름 전송 은 업로드 진 도 를 더욱 실시 간 으로 추적 할 수 있다.

분할 업로드 논 리 는 다음 과 같 습 니 다.
파일 을 업로드 할 File 대상 을 가 져 오고 chunk(각 크기)에 따라 파일 을 나 눕 니 다.
post 방법 을 통 해 모든 파일 을 차례로 업로드 합 니 다.그 중에서 url 에서 query string 을 연결 하여 현재 업로드 한 파일 정 보 를 설명 합 니 다.post body 에 올 릴 바 이 너 리 데이터 세 션 저장
인 터 페 이 스 는 매번 offset 으로 돌아 가 다음 업로드 에 사용 합 니 다.

initUpload();

//     
function initUpload() {
 var chunk = 100 * 1024; //    
 var input = document.getElementById("file"); //input file
 input.onchange = function (e) {
  var file = this.files[0];
  var query = {};
  var chunks = [];
  if (!!file) {
   var start = 0;
   //    
   for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
    var end = start + chunk;
    chunks[i] = file.slice(start , end);
    start = end;
   }
   
   //   post      
   // url query       ，        
   // post body              
   query = {
    fileSize: file.size,
    dataSize: chunk,
    nextOffset: 0
   }

   upload(chunks, query, successPerUpload);
  }
 }
}

//     
function upload(chunks, query, cb) {
 var queryStr = Object.getOwnPropertyNames(query).map(key => {
  return key + "=" + query[key];
 }).join("&");
 var xhr = new XMLHttpRequest();
 xhr.open("POST", "http://xxxx/opload?" + queryStr);
 xhr.overrideMimeType("application/octet-stream");
 
 //  post body      
 var index = Math.floor(query.nextOffset / query.dataSize);
 getFileBinary(chunks[index], function (binary) {
  if (xhr.sendAsBinary) {
   xhr.sendAsBinary(binary);
  } else {
   xhr.send(binary);
  }

 });

 xhr.onreadystatechange = function (e) {
  if (xhr.readyState === 4) {
   if (xhr.status === 200) {
    var resp = JSON.parse(xhr.responseText);
    //     nextoffset
    // resp = {
    //  isFinish:false,
    //  offset:100*1024
    // }
    if (typeof cb === "function") {
     cb.call(this, resp, chunks, query)
    }
   }
  }
 }
}

//          
function successPerUpload(resp, chunks, query) {
 if (resp.isFinish === true) {
  alert("    ");
 } else {
  //     
  query.offset = resp.offset;
  upload(chunks, query, successPerUpload);
 }
}

//          
function getFileBinary(file, cb) {
 var reader = new FileReader();
 reader.readAsArrayBuffer(file);
 reader.onload = function (e) {
  if (typeof cb === "function") {
   cb.call(this, this.result);
  }
 }
}

Blob URL
blob 프로 토 콜 의 url 을 사용 할 때 평소 사용 하 는 url 처럼 그림 요청 주소 로 도 사용 할 수 있 고 파일 요청 주소 로 도 사용 할 수 있 습 니 다.형식:
blob:http://XXX

URL.createObjectURL(blob)링크 만 들 기

URL.revokeObjectURL(url)

다음은 파일 을 다운로드 하 는 예제 입 니 다.직접 호출 하면 파일 다운 로드 를 실현 할 수 있 습 니 다.

// file       （blob  ）
downloadHandler: function (file, fileName) {
 let link = document.createElement('a')
 link.href = window.URL.createObjectURL(file)
 link.download = fileName
 link.click()
 window.URL.revokeObjectURL(link.href)
 if (navigator.userAgent.indexOf('Firefox') > -1) {
 const a = document.createElement('a')
 a.addEventListener('click', function (e) {
  a.download = fileName
  a.href = URL.createObjectURL(file)
 })
 let e = document.createEvent('MouseEvents')
 e.initEvent('click', false, false)
 a.dispatchEvent(e)
 }
}

배경 에서 가 져 온 데이터 인터페이스 에서 반환 형식 을 blob 로 설정 합 니 다.

var x = new XMLHttpRequest();
x.responseType = 'blob';  //     blob   

Blob URL 과 Data URL 의 차이
Blob URL

Data URL

Blob URL 의 길 이 는 일반적으로 짧 지만 Data URL 은 이미지 base 64 인 코딩 후의 데 이 터 를 직접 저장 하기 때문에 매우 길다.위의 그림 에서 보 듯 이 브 라 우 저 는 Data URL 을 표시 할 때 생략 번호(...)를 사용한다.큰 그림 을 표시 할 때 Blob URL 을 사용 하면 더 좋 은 가능성 을 얻 을 수 있 습 니 다.

Blob URL 은 XML HttpRequest 를 사용 하여 원본 데 이 터 를 쉽게 가 져 올 수 있 습 니 다.예 를 들 어 XML HttpRequest 가 되 돌아 오 는 데이터 형식 을 blob

로 설정 합 니 다.

Blob URL 은 현재 응용 프로그램 내부 에서 만 사용 할 수 있 으 며 Blob URL 을 브 라 우 저의 주소 표시 줄 에 복사 하면 데 이 터 를 가 져 올 수 없습니다.Data URL 에 비해 이식 성 이 뛰 어 나 임의의 브 라 우 저 에서 사용 할 수 있 습 니 다.

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.