Blob 对象

Blob（Binary Large Object）是前端专门用于支持文件操作的二进制对象。它表示一个不可变、原始数据的类文件对象，可以用于表示二进制数据。

File 对象

File 对象是一种特殊的 Blob 对象，它继承了 Blob 的功能，并添加了与文件系统交互的功能。File 对象可以通过用户选择文件、拖放操作或者使用<input type="file">元素来获取。

使用 a 标签下载文件

我们可以利用 Blob 对象和<a>标签实现文件的下载功能。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <a id="downloadLink">点击下载</a>
    <script>
      const downloadLink = document.getElementById('downloadLink');
      // 下载的内容
      const content = `<div><h1>这是一段文字</h1></div>`;
      // 创建Blob对象，传入内容和类型
      const blob = new Blob([content], {
        type: 'text/html',
      });
      // 使用URL.createObjectURL()创建Blob URL
      downloadLink.href = URL.createObjectURL(blob);
      // 设置下载属性和文件名
      downloadLink.setAttribute('download', 'index.html');
    </script>
  </body>
</html>

在这个示例中，我们首先创建了一个包含 HTML 内容的字符串。然后，我们使用new Blob()构造函数创建了一个 Blob 对象，传入内容和 MIME 类型。接下来，我们使用URL.createObjectURL()方法将 Blob 对象转换为一个 URL，并将其赋值给<a>标签的href属性。最后，我们设置了download属性，指定下载文件的文件名。

点击<a>标签时，浏览器会自动下载文件，文件内容就是我们创建的 Blob 对象所包含的内容。

FileReader 对象

FileReader 对象是 HTML5 新增的 API，用于读取文件的内容。它提供了多种读取文件的方法，如readAsDataURL()、readAsText()等。

下面是一个使用 FileReader 对象读取用户选择的图片并显示的示例：

<body>
  <input type="file" id="fileInput" />
  <script>
    const fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', (e) => {
      // 获取用户选择的文件
      const file = e.target.files[0];
      // 创建FileReader对象
      const fileReader = new FileReader();
      // 读取文件内容为Data URL
      fileReader.readAsDataURL(file);
      fileReader.onload = function () {
        // 创建<img>元素并设置src属性
        const img = document.createElement('img');
        img.src = fileReader.result;
        // 将图片添加到页面中
        document.body.appendChild(img);
      };
    });
  </script>
</body>

在这个示例中，当用户选择文件后，我们通过e.target.files[0]获取到用户选择的文件对象。然后，我们创建了一个 FileReader 对象，并调用readAsDataURL()方法读取文件内容为 Data URL。当文件读取完成后，会触发onload事件，我们在事件处理函数中创建了一个<img>元素，并将读取到的 Data URL 设置为图片的src属性，最后将图片添加到页面中。

URL.createObjectURL()方法

URL.createObjectURL()方法用于创建一个指向 Blob 或 File 对象的 URL。这个 URL 可以用于在浏览器中显示或下载文件。

下面是一个使用URL.createObjectURL()显示用户选择的图片的示例：

<body>
  <input type="file" id="fileInput" />
  <script>
    const fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', (e) => {
      // 获取用户选择的文件
      const file = e.target.files[0];
      // 创建Blob URL
      const url = URL.createObjectURL(file);
      // 创建<img>元素并设置src属性
      const img = document.createElement('img');
      img.src = url;
      // 将图片添加到页面中
      document.body.appendChild(img);
      // 在图片加载完成后释放Blob URL
      img.onload = function () {
        URL.revokeObjectURL(url);
      };
    });
  </script>
</body>

在这个示例中，我们使用URL.createObjectURL()方法创建了一个指向用户选择的文件的 URL，然后将其设置为<img>元素的src属性，以显示图片。需要注意的是，当不再需要这个 URL 时，应该调用URL.revokeObjectURL()方法释放它，以避免内存泄漏。这里我们在图片加载完成后立即释放了 URL。

大文件分割

对于大文件，如果直接读取或上传，可能会导致浏览器卡顿或崩溃。为了解决这个问题，我们可以使用 Blob 对象将大文件分割成多个小块，逐个读取或上传。

下面是一个使用 Blob 对象分割大文件的示例：

function splitFile(file, chunkSize) {
  const chunks = [];
  let start = 0;
  while (start < file.size) {
    const chunk = file.slice(start, start + chunkSize);
    chunks.push(chunk);
    start += chunkSize;
  }
  return chunks;
}

// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const chunkSize = 1024 * 1024; // 每个分块大小为1MB
  const chunks = splitFile(file, chunkSize);
  console.log(chunks); // 分割后的文件块数组
});

在这个示例中，我们定义了一个splitFile()函数，用于将文件分割成指定大小的块。函数接收两个参数：要分割的文件对象和每个块的大小（以字节为单位）。函数内部使用file.slice()方法对文件进行分割，并将分割后的块存储在一个数组中返回。

在使用示例中，我们监听文件选择器的change事件，获取用户选择的文件对象，然后调用splitFile()函数将文件分割成每个大小为 1MB 的块，最后将分割后的块数组打印到控制台。

通过将大文件分割成小块，我们可以逐个读取或上传这些块，避免一次性处理大文件导致的性能问题。

Blob 对象为前端操作文件提供了强大的支持。通过使用 Blob 对象，我们可以实现文件的下载、上传、分割等功能，并与其他 Web API（如 FileReader、URL.createObjectURL()等）配合使用，以满足各种文件操作的需求。合理利用 Blob 对象可以提升 Web 应用程序的文件处理能力和用户体验。

File 对象​

使用 a 标签下载文件

FileReader 对象

URL.createObjectURL()方法

大文件分割

File 对象