js base64 转file文件

小夭yao爱吃糖糖糖 2019-08-29 19:57:13

2106

分类专栏：前端基础文章标签： js base64转文件 base64

本文链接：https://blog.csdn.net/Smallsun_229/article/details/100145153

版权

需求

今天的需求是后台大佬返回给我文件的base64，前端需要把base64转成文件并下载。

开始搬砖

听着好简单的样子，当然去百度一波：js 图片base64转file文件的两种方式。作为一个cv程序员，我觉得可以下班了。

一波操作后，居然报了个错。

//将base64转换为文件
dataURLtoFile(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 });

}

emmmm这家伙可能在骗我，我再百度一下。怎么肥四，大家都是这么写的。。那看来是我的问题。

这里的问题在于初始数据的问题：

1）我们在浏览器中看到图片被转成base64之后，是这个样子的：

2）我们用一个在线base64转码的工具来转一个文件：

转出来的是这样子的，发现了没？！！缺失了前面的这一串字符data:image/jpeg;base64，所以后面我处理字符的时候就报错了。发现了原因之后，bug就很好就解了。

function dataURLtoBlob(dataurl) { 
    var bstr = window.atob(dataurl);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    
    return new Blob([u8arr], { type: 'application/zip' });
}

这个时候要注意的是MIME 就需要你自己去写了，也就是说你自己得知道文件的类型。MIME类型

在百度的时候发现，最后一句代码还可以写成：

return new File([u8arr], filename, { type: mime });

大家这两句写new Blob和new File的都很多，我试了下都是OK的。

最后一步，转成blob下载一下就OK。百度一波：

var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'file.zip';
a.click();
window.URL.revokeObjectURL(url);

cv程序员，下班hhhh。