File转base64的封装(回调函数形式)，以及如何通过base64判断数据源的类型

最近的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;