如何将图片文件、Blob、Base64图片在JavaScript中相互转换？

本文共计927个文字，预计阅读时间需要4分钟。

JavaScript 上传图片，确保清晰。图片展示方式有三种：分别为 file（文件流）、blob（本地流）、base64（二进制流）。file 接口提供文件信息，并允许网页中的 JavaScript 访问文件内容。

JS上传图片

我们要清楚，图片的展示方式有三种：分别为file(文件流)、bolb(本地流)、base64(二进制流)

file

File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

通常情况下， File 对象是来自用户在一个 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

blob

Blob 对象表示一个不可变、原始数据的类文件对象。指向的是本地的临时地址，Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。