浅谈Blob

   在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。基本上前端主要用于下载预览文件的时候需要从后端获取到流数据来进行解析，这个时候就需要通过Blob来进行数据的定义。

 

 基本上我们对于文件的处理可以通过以下几种方式。

通过window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL，并且用做文件下载或者图片显示的链接。

Blob URL所实现的下载或者显示等功能，仅仅可以在单个浏览器内部进行。而不能在服务器上进行存储，亦或者说它没有在服务器端存储的意义。

对于一个blob数据：

1.文件下载

    blob实现文件下载通过window.URL.createObjectURL(blob/file)来将其转化为blob的URL,然后通过赋值给a.download属性，通过点击a标签就可以实现下载功能了。

<a download="" id="aa" href="">下载数据</a>
<script>
    let aa = document.getElementById('aa')
    let blob = new Blob(['NBA SuperStar Devin Booker'])
    let url = window.URL.createObjectURL(blob)
    console.log(blob)
    aa.download = 'nba.txt'
    aa.href = url
</script>

运行结果： 

  2.图片显示

     我们可以可将window.URL.createObjetcURL()生成的URL赋值给img来显示图片

   

    <input type="file" name="" id="file">
    <img src="" alt="" id="img" style="width: 300px; height: 500px;">
    <script>
          let file = document.getElementById('file')
          file.addEventListener('change', function(e) {
          console.log(e.target.files[0])
          let data = window.URL.createObjectURL(e.target.files[0])
          console.log(data)
          let img = document.getElementById('img')
          img.src = data
          img.onload = () => {
           window.URL.revokeObjectURL(data)
        }
    }, false)
    </script>

这里我们看一下这里的blob对象

1就是我们图片信息的blob对象，2就是我们需要的blob的URL。

运行结果：

3.资源分段上传 

   这里目前还未去检验，等后期成功了再说明。

4.本地读取文件

   我们也可以从本地来读取相关文件。在这里通过FileReader.readAsText(blob)。

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

<input type="file" name="" id="file">
<script>
    let file = document.getElementById('file')
    let pp = document.getElementById('pp')
    file.addEventListener('change', function(e) {
      let data = e.target.files[0]
      console.log(data)
      let reader = new FileReader()
      reader.readAsText(data, "gb2312")
      console.log(reader)
      reader.onload = () => {
        console.log(reader.result)
        pp.textContent = reader.result
      }
    }, false)
</script>

 注意这里的readAsText()的类型为‘gb2312’，不然会发生乱码。

我们就可以将本地的文件通过blob来转化为file进行在线预览。

5.Blob转为file

  由于File也属于特殊的Blob。所以我们可以通过new window.File([blob], file.name, {type: file.type})来将blob数据转为file数据。

<input type="file" name="" id="file" />
<script>
    let file = document.getElementById('file')
    let pp = document.getElementById('pp')
    file.addEventListener('change', function(e) {
      let data = e.target.files[0]
      data = window.URL.createObjectURL(e.target.files[0])
      let file = new window.File([data], 'new.txt', {type: 'text/plain'})
      console.log(data)
      console.log(file)
    }, false)
</script>

在这里我们其实可以看到blob类型转化后的File类型。但在我们拿到上传的文件e.target.file[0]其实就是file类型，通过createObjectURL将他转化为blob的URL来进行使用，所以我们可以在blob与file相互转化，通过window.createObjetcURL()和new window.File()。

具体可以参考  https://zhuanlan.zhihu.com/p/97768916