blob

JS

• child::file

前端中的blob

Blob是什么？

• Blob（二进制大对象）是一种数据类型，用于在浏览器中处理二进制数据。它可以存储大量的数据，并且可以使用JavaScript进行操作。

创建Blob对象

• 可以使用Blob构造函数来创建一个新的Blob对象，传入一个包含二进制数据的数组作为参数。

var data = ['Hello, world!'];
var blob = new Blob(data, { type: 'text/plain' });

使用Blob对象

• use::

  createObjectURL

  梗概

  createObjectURL是一个用于创建Blob URL的方法。Blob URL是一种特殊的URL，用于指向存储在Blob或File对象中的数据。通过使用createObjectURL方法，开发人员可以将Blob或File对象转换为一个唯一的URL，从而可以在网页中直接引用和展示这些数据。

  关键点

  • createObjectURL方法接受一个Blob或File对象作为参数，并返回一个包含该对象数据的唯一URL。
  • 这个URL可以被直接用于展示、下载或分享文件内容。
  • Blob URL只在当前浏览器会话中有效，在页面刷新或关闭后会失效。
  • 使用完Blob URL后，应及时调用revokeObjectURL方法释放资源。

  示例代码

  // 创建Blob对象
  var data = new Blob(['Hello, World!'], { type: 'text/plain' });
   
  // 创建Blob URL
  var url = URL.createObjectURL(data);
   
  // 在页面中展示链接
  var link = document.createElement('a');
  link.href = url;
  link.download = 'hello.txt';
  link.innerHTML = 'Download File';
  document.body.appendChild(link);
   
  // 释放资源
  link.onclick = function() {
      setTimeout(function() {
          URL.revokeObjectURL(url);
      }, 1500);
  };

  指向原始笔记的链接

上传Blob对象

• 当需要上传二进制文件时，可以将Blob对象传递给FormData对象，然后通过XMLHttpRequest或Fetch API来发送到服务器。

var formData = new FormData();
formData.append('file', blob, 'example.txt');