hello大家好，我是Range。今天就来聊聊Blob，到底是什么，怎么用，以及那些年我踩过的坑。

Blob？不就是个二进制的对象嘛

说实话，第一次听说Blob的时候，我以为是哪个新出的框架缩写。后来才知道，这玩意全称是Binary Large Object，翻译过来就是“二进制大对象”。听着挺高大上，其实说白了就是前端处理二进制数据的一个接口。

我记得最早接触Blob是在做文件上传功能的时候。那时候需要在前端先验证用户上传的是不是图片文件，就得用Blob来获取文件类型。

// 举个例子，获取用户上传的文件类型
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  console.log(file instanceof Blob);  // true
  console.log(file.type);             // image/png
});

看到没，我们熟悉的File对象其实就是Blob的一种特殊类型，多了个name、lastModifiedDate这样的属性而已。

怎么用Blob解决实际问题的

图片压缩功能

记得有一次产品经理说要做个图片压缩上传的功能，我第一反应是“这得后端来吧”，但后端哥们那会儿正忙得焦头烂额，我就硬着头皮研究前端方案。

结果发现用Canvas压缩图片后，可以直接用toBlob()方法转换成Blob对象：

function compressImage(file, quality = 0.8) {
returnnewPromise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      // ...省略canvas尺寸设置代码
      canvas.toBlob((blob) => {
        resolve(blob);
      }, 'image/jpeg', quality);
    };
    img.src = URL.createObjectURL(file);
  });
}

大文件分片上传

还有一个让我印象深刻的场景是大文件上传。用户要上传2G的视频文件，直接上传肯定不行，那时候我就用Blob的slice方法做了分片：

function sliceFile(file, chunkSize = 1024 * 1024) {
const chunks = [];
let start = 0;

while (start < file.size) {
    const chunk = file.slice(start, start + chunkSize);
    chunks.push(chunk);
    start += chunkSize;
  }

return chunks;
}

这样就把大文件切成了1MB一块的小文件，可以分片上传、断点续传了。说实话，做完这个功能后，我在团队里走路都带风。

Blob的另一个妙用：生成临时下载链接

不知道你们有没有遇到过这种需求：把页面上的数据生成文件让用户下载。我最开始的做法是让后端生成文件链接，直到有一天后端同事说：“你这前端不能自己搞定吗？”

然后我就发现了URL.createObjectURL()这个方法：

function downloadData(data, filename, type = 'text/plain') {
const blob = new Blob([data], { type });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
  a.href = url;
  a.download = filename;
document.body.appendChild(a);
  a.click();

// 清理很重要！不然会内存泄漏
  setTimeout(() => {
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });
}

现在Blob还能这么玩

最近我还看到一些有趣的应用场景。比如用Blob + Service Worker做资源缓存，或者配合Web Assembly处理大型二进制数据。

不过说实话，日常开发中大部分时候我们不需要直接操作Blob，很多框架都已经封装好了。但了解底层原理的好处是，当遇到棘手问题时，你能多一条解决问题的思路。

好了，今天先聊到这。如果你们在Blob使用上有什么有趣经历或者坑点，欢迎在评论区分享——我也很好奇大家都会遇到什么奇怪的问题。

对了，如果文章里有哪里没说清楚的，也可能是我记错了（毕竟工作这么多年了），欢迎指正！