JavaScript 将base64 转换为File

Posted yuzhihui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 将base64 转换为File相关的知识,希望对你有一定的参考价值。

在 JavaScript 中,可以使用 Blob 对象将 base64 字符串转换为 File 对象。

在 JavaScript 中,可以使用 Blob 对象将 base64 字符串转换为 File 对象。

 

方法一(推荐,但存在兼容性问题):

首先, 你需要从 base64 字符串中获取文件类型, 然后将文件类型和 base64 字符串转换为 Blob 对象。最后, 使用 Blob 对象构造函数创建一个 File 对象。

下面是一个示例函数,它接收一个 base64 字符串和文件名,并返回一个 File 对象:

function base64ToFile(base64, fileName) 
    let arr = base64.split(\',\');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);

    while(n--)
        u8arr[n] = bstr.charCodeAt(n);
    
    return new File([u8arr], fileName, type: mime);

需要注意的是, atobUint8Array 是在所有现代浏览器中都可用的。在旧浏览器中,需要使用其它库来替代这两个函数。

如果您需要在使用这个函数之前检查文件类型是否支持,可以在函数中增加文件类型校验的代码。

 

方法二(由方法一分两步实现,存在兼容性问题):

在 JavaScript 中,可以使用 Blob 对象将 base64 字符串转换为二进制数据对象 (Blob)。

首先,使用 atob() 函数将 base64 字符串解码为二进制字符串。然后,使用 Uint8Array 构造函数将二进制字符串转换为字节数组。最后,使用 Blob 构造函数,将字节数组作为第一个参数,创建一个新的 Blob 对象。

 

1、先将base64转换为 Blob

// 将base64 转换为Blob
function base64ToBlob(base64) 
	var arr = base64.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 对象就可以按照二进制文件的方式来使用,可以作为参数传入 FileReader, 通过 FormData 对象上传到服务器等。

需要注意的是, atobUint8Array 是在所有现代浏览器中都可用的。在旧浏览器中,需要使用其它库来替代这两个函数。

如果您需要在使用这个函数之前检查文件类型是否支持,可以在函数中增加文件类型校验的代码。

 

另外,在HTML5中,可以使用 canvas 元素的 toBlob()方法 将图片转换为 Blob 对象,这个方法是基于 HTMLCanvasElement 元素的, 你可以将一张图片转成base64后,再使用 canvas 的方法将图片绘制在 canvas 元素上,然后使用 toBlob() 方法获取到 Blob 对象。

还有一些第三方库,比如 FileSaver.js, 你可以使用它来将 Blob 对象保存在本地。

这些方法都能达到相同的目的,你可以根据项目中使用的 JavaScript 环境和需要的复杂度来进行选择

 

在 JavaScript 中,可以使用 File 构造函数将一个 Blob 对象转换为一个 File 对象。

这个构造函数接收两个参数: 第一个参数是一个 Blob 或者 ArrayBuffer 对象,第二个参数是文件的名字。

2、再将Blob转换为 File

function blobToFile(blob, fileName) 
    return new File([blob], fileName);

由于Blob是File的超集, 所以可以直接将Blob对象转换为File对象, 这样就可以使用File对象的各种方法,例如获取文件名、类型等。

由于这个是新的API, 可能在部分浏览器上不能使用, 也可以使用第三方库来兼容在旧浏览器上使用。

 

以上是关于JavaScript 将base64 转换为File的主要内容,如果未能解决你的问题,请参考以下文章

如何在 JavaScript 中使用字节数组将字符串转换为 base64 编码?

如何将 Base64 字符串转换为 javascript 文件对象,如文件输入表单?

javascript 将base64转换为web安全变体

如何使用javascript将字符串转换为base64? [复制]

如何将画布图像“data:image/jpeg;base64,..”转换为普通图像文件 - javascript

在 Javascript 中将 PDF 转换为 Base64 编码的字符串