前端base64转换为blob

假设你有一张图片的 base64 数据：data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
你需要将它生成一个 png 图片格式的 blob 对象，可以直接用 <img> 标签显示或上传到服务器。

/**
 * base64转换为blob
 * @param { base64 } dataurl base64数据
 * @return blob
 */
export function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

具体步骤如下：

1、拆解 base64 字符串
用逗号 , 将输入分成两部分：
第一部分（如 data:image/png;base64）描述数据类型（比如图片的格式）。
第二部分（如 ABC123...）是真正的 base64 编码数据。

2、提取文件类型
从第一部分中用正则表达式提取出文件的 MIME 类型（比如 image/png）。

3、解码 base64
将第二部分 base64 字符串解码成原始的二进制字符串（这一步类似解密操作）。

4、转换成二进制数组
创建一个能存储二进制数据的数组（Uint8Array），逐个字符将二进制字符串转成数字存入数组。

5、生成 Blob 对象
用这个二进制数组和文件类型创建一个 Blob（类似“文件”对象），可以直接用于上传、下载或展示。