Blob,ArrayBuffer,FileReader,FormData,Buffer的理解

Blob

• 作用: 操作文件 (下载文件，展示图片，读取文件，分片文件)
  1.下载文件

<!-- 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方法或其他进行优化)

//步骤: 1.根据下载内容创建blob实例  2.将blob实例转换为url   3. 将 url赋值给a标签的href   4. 给a标签的download定义下载文件的名字

2.展示图片

<!-- html部分 -->
<input type="file" id='f' />
<img id='img' style=" 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>

// files[0]是blob的特殊形式     相当于上面的步骤1

3.文件分片上传

<!-- 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));   //blob.slice 返回的是截取下来的blob
        start = end;
        end = start + CHUNK_SIZE;
    }
}, false);
</script>

4.读取文件 通过FileReader

FileReader.readAsText(Blob)：将Blob转化为文本字符串
FileReader.readAsArrayBuffer(Blob)： 将Blob转为ArrayBuffer格式数据
FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL


<input type="file" id='f' />
<script>
  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);
</script>

ArrayBuffer

• 作用: 操作文件 (读取，写入) 本身不具备写入的功能，通过TypeArray，DataView来进行写入操作

<!-- html部分 -->
<input type="file" id='f' />

<!-- js部分 -->
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);

• TypeArray的写入

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]

转自:https://zhuanlan.zhihu.com/p/97768916