前言
前几天做项目遇到了一个问题，如何把base64的格式的图片编码转换为图片的File对象。然后网上也找到了一下具体的实现方法，当中涉及到了一些编码转换的知识，因此特地来总结一下。
先上一段代码
[AppleScript] 纯文本查看 复制代码 let byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0) byteString = atob(base64Data.split(",")[1]);
else byteString = unescape(base64Data.split(",")[1]);
let mime = base64Data
.split(",")[0]
.split(":")[1]
.split(";")[0];
let ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mime });
base64
百度百科的解释是：网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。简单点说就是将二进制编码转成ASCII编码，而且base64一般用于http协议下的二进制传输。
优点：能将二进制数据转化为可打印的字符，方便传输，而且也方便加密。
缺点：转化后内容体积过大，编码和解码需要工作量。
atob
window对象的内置方法，用于解码使用 base64 编码的字符串。与之相反的就是btoa，用于base64编码
[AppleScript] 纯文本查看 复制代码 let string = window.btoa('hello');
console.log(string);
let result = window.atob(string);
console.log(result);
打印结果
Uint8Array
MDN的解释是：表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。它这里面其实能存储任何格式的数据，包括对象，数组，字符串，数字，布尔值等等。其实就是存储数据的一种方法。
unescape
unescape() 函数可对通过 escape() 编码的字符串进行解码。
该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。
但是，ECMAScript v3 已从标准中删除了 unescape() 函数，其实应该用 decodeURI() 和 decodeURIComponent()代替。
Blob
Blob 对象表示一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
因此将这是我们转化File文件依赖的关键的对象方法。
正常新建一个blob对象需要两个参数
数据序列，可以是任意格式的值
指定将要放入Blob中的数据的类型(MIME)
解释
综合以上的编码知识，再来看看最上面的代码，其实就很好理解了。
base64 通常开头会有data:image/png;base64这样格式的字符串
[AppleScript] 纯文本查看 复制代码 function(base64Data) {
let byteString; //声明一个字符串存储对象
//判断传入的参数是否是base64格式的字符串
if (base64Data.split(",")[0].indexOf("base64") >= 0)
{ //使用 atob解码base64字符串
byteString = atob(base64Data.split(",")[1]);
} else {
//如若不是，就shi用unescape解码
byteString = unescape(base64Data.split(",")[1]);
}
let mime = base64Data //截取出转换的文件格式，也就是"image/png"
.split(",")[0]
.split(":")[1]
.split(";")[0];
let ia = new U int8 Array(byteString.length); //创建一个Uint8Array对象，长度为byteString的长度
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i); //读取指定位置的字符的 Unicode 编码
}
return new Blob([ia], { type: mime });//最后生成并返回 blob对象
}
以上base64的转换就完成了。
最后一步，生成File对象
[AppleScript] 纯文本查看 复制代码 let file = new File([blob], "portrait.jpg", {
type: "image/jpeg"
});
File对象接收三个参数
blob对象
生成文件的名称
额外参数 type表示具体的格式
这就是base64转换File对象的全过程，其中需要掌握的知识还挺多的。
链接：https://juejin.im/post/5e7c1324f265da42cf183a8a
| 
收藏
淘帖
踩
