JavaScript - Blob / File / base64 使用场景介绍与相互转换

前言

本文首先介绍一下这三种对象使用场景，最后介绍下它们之间互转格式的解决方案。

您前端一旦涉及到文件或图片上传到服务器，就势必离不了 Blob / File / base64 三种主流的类型，

它们之间 互转 也成了常态，但网上很多教程写的不清晰，本文重新整理一下。

• Blob → File
• Blob → Base64
• Base64 → Blob
• File → Base64
• Base64 → File

---

Blob

MDN： https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

您可以观察到，像一些图片处理插件（例如有名的 vue-cropper ）图片裁剪插件，

它们将图片处理完毕后，都将使用 blob 对象返回处理好的图片，供开发者用于上传服务器。

File

MDN：