Blob API

2020/02/24 JavaScript

关于 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:'这里是日志内容`
  `

  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,上下以结合就实现了,文件下载的功能

Blob 还能做什么?

  1. 文件下载地址(上面例子)

  2. 页面加载图片资源

<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>
  1. 大文件,分块上传
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()

Blob()

XMLHttpRequest

JS 中的 Blob 对象

前端下载文件的 5 种方法的对比

node 的流

如果我们用 nodefs 的写文件流来实现是不是会更加简单呢?确实是的,看看代码:

const fs = require('fs')
const str = '这里是要复制的内容,复制到一个文本里面'
const ws = fs.createWriteStream('1.log')
ws.write(str)

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

如果喜欢我的话,我们可以互相关注,相互学习的哟!互相鼓励,你的关注是我最大的动力来源

sunseekers

Search

    Table of Contents