最近的task都是文件流的上传下载各种转。主要是涉及File转base64
简要思路就是:FileReader读取文件,通过readAsURL方法,获得一个base64类型的流
看了看网上别人的封装:
/**
* File转base64
* @param file
* @return base64
* */
export function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
let fileResult = "";
reader.readAsDataURL(file);
//开始转
reader.onload = () => {
fileResult = reader.result;
};
//转失败
reader.onerror = (error) => {
reject(error);
};
//结束 resolve
reader.onloadend = () => {
resolve(fileResult);
};
});
}
其实可以更一步封装 : }
自己的实现其实可以封装一个callback回调函数
static getBase64(f: File, callback: (f: string) => void): void {
reader.readAsDataURL(f);
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result.toString()));
}
该方法接受一个FIle类型的文件 和 一个callback回调函数
先将文件读取为base64格式
再给fileReader对象添加load完成事件,执行回调。此时拿到的是base64的字符串,比较好处理。
顺便一提,很多时候需要对base64字符串处理,获取文件类型,可以通过正则表达式来拿:
fileType = f.split(',')[0].match(/:(.*?);/)[1];
-------------------------------------------------- split ------------------------------------------------------------------------
有时候需要通过base64来判断文件的类型,获取不同文件的文件头前3个字作为判断依据
以下是别人封装的方法:
let fileHeader = new Map();
//获取不同文件的文件头前3个字作为判断依据
fileHeader.set("/9j", "JPG")
fileHeader.set("iVB", "PNG")
fileHeader.set("Qk0", "BMP")
fileHeader.set("SUk", "TIFF")
fileHeader.set("JVB", "PDF")
fileHeader.set("UEs", "OFD")
let res = ""
//遍历map中所提及的文件头特征
fileHeader.forEach((v, k) => {
if (k == fileBase64.substr(0, 3)) {
res = v
}
})
//如果不在map中返回unknown file
if (res == "") {
res = "unknown file"
}
//否则返回map中的value值
return res;