JS 의 이 진 가족 에 대해 서 말씀 드 리 겠 습 니 다.

개술
Blob:파일 작업 을 지원 하 는 바 이 너 리 대상
Array Buffer:전단 에 있 는 일반적인 바 이 너 리 버퍼 는 배열 과 유사 하지만 API 와 특성 에 있어 서 는 많이 다 릅 니 다.
Buffer:Node.js 가 제공 하 는 바 이 너 리 버퍼 는 I/O 작업 을 처리 하 는 데 자주 사 용 됩 니 다.
Blob
먼저 Blob 를 소개 하 겠 습 니 다.Blob 는 파일 작업 을 지원 하 는 데 사 용 됩 니 다.쉽게 말 하면 JS 에는 두 개의 구조 함수 File 과 Blob 가 있 고 File 은 모든 Blob 의 속성 을 계승 했다.
그래서 우리 가 보기에 File 대상 은 특수 한 Blob 대상 으로 볼 수 있다.
전단 공사 에서 우 리 는 어떤 조작 에서 File 대상 을 얻 을 수 있 습 니까?보 세 요:

(비고:현재 File API 규범 상 태 는 Working Draft)
위 에서 말 했 듯 이 File 대상 은 특수 한 Blob 대상 이 므 로 자 연 스 럽 게 Blob 대상 을 직접 호출 할 수 있 는 방법 입 니 다.Blob 가 구체 적 으로 어떤 방법 을 가지 고 있 는 지,그리고 그것 으로 어떤 기능 을 실현 할 수 있 는 지 살 펴 보 자.

Blob 실전
window.URL.createObjectURL 방법 을 통 해 하나의 blob 를 Blob URL 로 바 꾸 고 파일 다운로드 나 그림 으로 표시 하 는 링크 를 사용 할 수 있 습 니 다.
Blob URL 이 구현 하 는 다운로드 나 디 스 플레이 등 기능 은 하나의 브 라 우 저 내부 에서 만 수행 할 수 있 습 니 다.서버 에 저장 할 수 없 거나 서버 에 저장 할 의미 가 없다.
다음은 Blob 의 예 입 니 다.짧 은 것 을 볼 수 있 습 니 다.
blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
지루 한 Base 64 형식의 Data URL 에 비해 Blob URL 의 길 이 는 충분 한 정 보 를 저장 할 수 없 음 이 분명 하 다.이것 은 브 라 우 저 내부 의'참조'와 유사 하 다 는 것 을 의미한다.이런 측면 에서 볼 때 Blob URL 은 브 라 우 저가 자체 적 으로 제정 한 위조 프로 토 콜 이다.
Blob 다운로드 파일
우 리 는 window.URL.createObjectURL 을 통 해 Blob(File)대상 을 받 아 Blob URL 로 바 꾼 다음 a.다운 로드 속성 을 부여 한 다음 페이지 에서 이 링크 를 클릭 하면 다운로드 가 가능 합 니 다.

<!-- html   -->
<a id="h">      </a>
<!-- js   -->
<script>
  var blob = new Blob(["Hello World"]);
  var url = window.URL.createObjectURL(blob);
  var a = document.getElementById("h");
  a.download = "helloworld.txt";
  a.href = url;
</script>

비고:download 속성 이 IE 와 호 환 되 지 않 습 니 다.IE 는 window.navigator.msSaveBlob 방법 또는 기타 로 최적화 할 수 있 습 니 다(IE 10/11)
실행 결과

Blob 그림 로 컬 디 스 플레이
window.URL.createObject URL 에서 생 성 된 Blob URL 은 img.src 에 부여 하여 그림 을 표시 할 수 있 습 니 다.

<!-- html   -->
<input type="file" id='f' />
<img id='img' style="width: 200px;height:200px;" />
<!-- js   -->
<script>
  document.getElementById('f').addEventListener('change', function (e) {
    var file = this.files[0];
    const img = document.getElementById('img');
    const url = window.URL.createObjectURL(file);
    img.src = url;
    img.onload = function () {
        //            URL.createObjectURL    URL   
        window.URL.revokeObjectURL(url);
    }
  }, false);
</script>

실행 결과

Blob 파일 분할 업로드
Blob.slice(start,end)를 통 해 큰 Blob 를 여러 개의 작은 Blob 로 나 눌 수 있 습 니 다xhr.send 는 Blob 대상 을 직접 보 낼 수 있 는전단

<!-- html   -->
<input type="file" id='f' />
<!-- js   -->
<script>
  function upload(blob) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/ajax', true);
    xhr.setRequestHeader('Content-Type', 'text/plain')
    xhr.send(blob);
  }
  document.getElementById('f').addEventListener('change', function (e) {
    var blob = this.files[0];
    const CHUNK_SIZE = 20; .
    const SIZE = blob.size;
    var start = 0;
    var end = CHUNK_SIZE;
    while (start < SIZE) {
        upload(blob.slice(start, end));
        start = end;
        end = start + CHUNK_SIZE;
    }
  }, false);
</script>

노드 엔 드

app.use(async (ctx, next) => {
    await next();
    if (ctx.path === '/ajax') {
        const req = ctx.req;
        const body = await parse(req);
        ctx.status = 200;
        console.log(body);
        console.log('---------------');
    }
});

파일 내용
According to the Zhanjiang commerce bureau, the actual amount of foreign capital utilized in Zhanjiang from January to October this year was
실행 결과

로 컬 읽 기 파일 내용
Blob 또는 파일 대상 을 읽 고 다른 형식의 데이터 로 전환 하려 면 FileReader 대상 의 API 를 통 해 작업 할 수 있 습 니 다.

FileReader.readAsText(Blob):Blob 를 텍스트 문자열 로 변환 합 니 다

FileReader.readAsArrayBuffer(Blob):Blob 을 ArrayBuffer 형식 데이터 로 변환 합 니 다FileReader.readAsDataURL():Blob 를 Base 64 형식의 Data URL 로 변환 합 니 다다음은 파일 의 내용 을 문자열 로 읽 어 보 겠 습 니 다.

<input type="file" id='f' />


document.getElementById('f').addEventListener('change', function (e) {
    var file = this.files[0];
    const reader = new FileReader();
    reader.onload = function () {
        const content = reader.result;
        console.log(content);
    }
    reader.readAsText(file);
}, false); 

실행 결과

위 에서 Blob 의 용법 을 소 개 했 습 니 다.Blob 는 파일 을 대상 으로 하거나 파일 대상 이 라 고 할 수 있 습 니 다.또한 Blob 는 바 이 너 리 데이터 에 대한 세부 적 인 조작 능력 이 부족 하 다 는 것 을 알 게 되 었 습 니 다.예 를 들 어 특정한 부분의 바 이 너 리 수 거 를 구체 적 으로 수정 하려 면 Blob 는 분명히 부족 합 니 다.이런 입자 도 기능 은 아래 에 소 개 된 Array Buffer 로 완성 할 수 있다.
ArrayBuffer
Array Buffer 의 대체 적 인 기능 을 한 장의 그림 으로 보 여 주세요.

또한 Array Buffer 는 JS 의 원생 배열 과 큰 차이 가 있다 는 것 을 설명 한다.그림 과 같다.

디 테 일 하 게 소개 해 드 리 겠 습 니 다.
Array Buffer 형식 으로 로 컬 데 이 터 를 읽 습 니 다.

document.getElementById('f').addEventListener('change', function (e) {
  const file = this.files[0];
  const fileReader = new FileReader();
  fileReader.onload = function () {
    const result = fileReader.result;
    console.log(result)
  }
  fileReader.readAsArrayBuffer(file);
}, false);

실행 결과

Array Buffer 형식 으로 Ajax 요청 데 이 터 를 읽 습 니 다.
xhr.responseType="arraybuffer"를 통 해 응답 하 는 데이터 형식 을 지정 합 니 다.
onload 리 셋 에 xhr.response 인쇄
전단

const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
    console.log(xhr.response)
}
xhr.send();

노드 엔 드

const app = new Koa();
app.use(async (ctx) => {
  if (pathname = '/ajax') {
        ctx.body = 'hello world';
        ctx.status = 200;
   }
}).listen(3000)

실행 결과

TypeArray 를 통 해 Array Buffer 에 대해 쓰기 동작 을 진행 합 니 다.

const typedArray1 = new Int8Array(8);
typedArray1[0] = 32;

const typedArray2 = new Int8Array(typedArray1);
typedArray2[1] = 42;
 
console.log(typedArray1);
//  output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]
 
console.log(typedArray2);
//  output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]

DataView 를 통 해 Array Buffer 에 대한 쓰기 작업

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt8(2, 42);
console.log(view.getInt8(2));
//   : 42

Buffer
Buffer 는 Node.js 가 제공 하 는 대상 으로 전단 에 없습니다.이 는 일반적으로 IO 작업 에 사 용 됩 니 다.예 를 들 어 전단 요청 데 이 터 를 받 을 때 아래 의 Buffer API 를 통 해 받 은 전단 데 이 터 를 통합 할 수 있 습 니 다.

버퍼 실전
예 는 다음 과 같다.
노드 엔 드(Koa)

const app = new Koa();
app.use(async (ctx, next) => {
    if (ctx.path === '/ajax') {
        const chunks = [];
        const req = ctx.req;
        req.on('data', buf => {
            chunks.push(buf);
        })
        req.on('end', () => {
            let buffer = Buffer.concat(chunks);
            console.log(buffer.toString())
        })
    }
});
app.listen(3000)

전단

const xhr = new XMLHttpRequest();
xhr.open("POST", "ajax", true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send("asdasdsadfsdfsadasdas");

실행 결과
노드 엔 드 출력
asdasdsadfsdfsadasdas
이상 은 JS 의 바 이 너 리 가족 에 대한 상세 한 내용 입 니 다.JS 의 바 이 너 리 가족 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!