前端文件上传的几种编码方式

方式一： base64编码上传

什么是base64编码？

Base64就是一种用64个Ascii字符来表示任意二进制数据的方法。主要用于将不可打印的字符转换成可打印字符，或者简单的说将二进制数据编码成Ascii字符。

base64编码的优点和缺点？

优点：

1. 浏览器可以马上展示图像，不需要先上传到服务端，减少服务端的垃圾图像
2. 前端可以压缩、处理后上传到服务端，减少传输过程中的等待时间和服务器压力
3. base64编码本质是字符串，可以想普通的post接口那样进行接口调用

缺点：

1. 生成编码后保存成图片，倘若不做处理，会比原来的图片容量大

如何将文件转成base64编码？

1. 通过FileReader对象根据图片的路径将图片转换成base64编码

<input id="upload" type="file" />
document.getElementById('upload').onchange = function(e) {
    let filePath = e.target.files[0]; // 获取选中的文件路径
    reader.readAsDataURL(filePath); // 对文件路径进行base64编码
    reader.onload = function(e) {
        console.log(e.target.result) // 获取base64编码
    } 

方式二： blob流文件上传

1. 什么是blob？

blob是二进制类型的大对象，在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象

2. base64和blob之间有什么区别？

对于web中用到blob的场景相对少，没做深入了解。 详情查看：www.jianshu.com/p/b322c2d5d…

3. base64和blob之间如何转换？

// base64编码转成blob流
function dataURItoBlob(base64Data) {
    var byteString;
    if(base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
    else
        byteString = unescape(base64Data.split(',')[1]);
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for(var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: mimeString
    });
}

// blob文件转base64
function blobTobase64 (blob) {
    let fileReader = new FileReader();
    fileReader.readAsDataURL(blob);
    fileReader.onload = function (e) {
        console.log(e.target.result) // base64编码
    }
}