JavaScript 将base64 转换为File

Posted 2023-01-11 yuzhihui

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

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

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

 

方法二（由方法一分两步实现，存在兼容性问题）：

在 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 对象上传到服务器等。

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

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

 

另外，在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, 可能在部分浏览器上不能使用, 也可以使用第三方库来兼容在旧浏览器上使用。

 

作者：yuzhihui
出处：http://www.cnblogs.com/yuzhihui/

声明：欢迎任何形式的转载，但请务必注明出处！！！