关于 `Blob`

Blob 是什么？我是怎么知道它的？他有什么用？为啥要学习他？

他是二进制类型的大对象，在处理一些文本，图片的时候我知道了他。可以很方便的帮我处理很多文件类型的东西。学习他我可以知道很多我不知道的事情

借用 `Blob` 实现下载文件

需求：点击一个按钮自动复制一段文本，并且把它下载到本地

嗯嗯，刚刚拿到这个需求的时候是有一点点懵逼的，是一种新的尝试。做完之后发现很简单，又 get 到了新的技能，特别开心。

实现方式： Blob ,a

export default function Loginfo() {

  let info = `
name: sunseekers
role: student
houseName: shanghai
url: https://github.com/sunseekers
userAgent: ${navigator.userAgent}
log:'这里是日志内容'
  `.trim();// 这里用trim() 是为了消除第一行是一个换行

  const funDownload = (content: string, filename: string) => {    // 创建隐藏的可***链接
    const eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';

    const blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);    // 字符内容转变成blob地址

    document.body.appendChild(eleLink);
    eleLink.click();    // 触发点击
    document.body.removeChild(eleLink);// 然后移除

    Message.success('日志下载成功')
  };

  const onCopyHandle = (copyText: any) => {
    funDownload(info, 'logFiles.md');
  }

  return (
    <div className="copy">
        <buttom onClick={onCopyHandle}> 复制文本 </bottom>
    </div>
  )
}

模板字符串中，空格、缩进、换行都会被保留，我们为了输出的日志好看一点，有换行有空格，就是用了模版字符串

代码实现就是这么简单，a 标签的 download 属性实现点击可下载， href 是下载的地址。

在计算里面所有的文件都是以二进制形成存储，文件读取以流的形式。Blob 能够满足，把一段内容变成文件类型对象（二进制）URL.createObjectURL() 创建一个 url，上下以结合就实现了，文件下载的功能

知识扩展=>文件流

文件（File）接口提供有关文件的信息

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。

File 接口没有定义任何方法，但是它从 Blob 接口继承了一些方法和属性

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blob Test</title>
  <script>
    function handleFile(e) {
      var file = e.files[0]; // 获取上传 File 对象 的信息
      var fileReader =
        new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据
      var img = document.getElementsByTagName('img')[0]
      console.log('e', e.files[0]);

      fileReader.onload = function (e) {
        img.src = e.target.result;
      } // 读取操作完成触发
      fileReader.readAsDataURL(file); // 读取指定的 Blob 或 File 对象
    }
  </script>
</head>

<body>
  <input type="file" accept="image/*" onchange="handleFile(this)" />
  </br>
  <img style="width:200px;height:200px;">
</body>

</html>

大文件，分块上传

function uploadFile(file){
  const chunkSize = 1024 * 1024 // 每块上传文件的大小 1M
  const totalSize = file.size
  const chunkQuantity = Math.ceil(totalSize/chunkSize) // 分片总数
  const offset = 0 // 偏移量

  const reader = new FileReader()// 创建一个可读文件
  reader.onload = (e)=>{
    const xhr = new XMLHttpRequest()
    xhr.open("POST",url)
    xhr.overrideMineType("application/octet-stream") // 重写由服务器返回的 MIME 类型

    xhr.onreadstatechange = ()=>{
      if(xhr.readyState===4 && xhr===200){
        ++offset
        if(offset===chunkQuantity){
          alert("上传完成")
        }else if(offset === chunckQuantity-1){
          blob = file.slice(offset*chunkSize, totalSize);
          reader.readAsBinaryString(blob);// 指定读取 blob 内容
        }else {
          blob = file.slice(offset*chunkSize, (offset+1)*chunckSize);
          reader.readAsBinaryString(blob);
        }
       }else {
        alert("上传出错")；
      }
      if(xhr.sendAsBinary) {
      xhr.sendAsBinary(e.target.result); // 用来发送二进制数据，非标准方法
    } else {
      xhr.send(e.target.result);
    }
    }
  }
  const blob = file.slice(0, chunkSize);
  reader.readAsBinaryString(blob);//  所有二进制数据
}

FileReader

URL.createObjectURL()

function breadth(list){ let arr = list while(arr.length>0){ let current = arr.shift() debugger console.log(current) if(Array.isArray(current)){ current.forEach(item=>{ arr.push(item) }) } } } const list = [[1],[2,[3,[4]]],[5],[6]] breadth(list)

sunseekers

Blob API

关于 `Blob`

借用 `Blob` 实现下载文件

知识扩展=>文件流

文档信息

Search

Table of Contents

Blob API

关于 Blob

借用 Blob 实现下载文件

知识扩展=>文件流

文档信息

Search

Table of Contents

关于 `Blob`

借用 `Blob` 实现下载文件