base64和file互转

应用场景

工作中经常遇到需要把图片文件操作之后再上传到服务器（比如，压缩、旋转、拼接、裁剪、生成预览、canvas等），通常操作之后的图片都会变成一个 base64 编码的字符串，把这个字符串嵌入到 img 标签的 src 属性中就能看到图片了。

正常来说也是可以把这个字符串传给服务器存储的，但是图片生成base64字符串后特别特别的长，这样存取的话非常慢。

所以我们需要把它转回成文件对象再传给服务器，这样就能得到一个图片的链接了。

• 文件(File) 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

正常我们通过 <input type="file"/>上传图片得到的file对象是这样的：

• Data URLs，即前缀为 data: 协议的的URL，其允许内容创建者向文档中嵌入小文件。

通过base64编码之后是这样的：

• Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

转换成blob再传给服务器就可以了，图片信息都在里面呢

转换方法

百度搜很多，这里贴一个

base64 转 blob

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 });
}

blob 转 base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}