js base64 转file文件

需求

今天的需求是后台大佬返回给我文件的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。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页