环球热门:JavaScript 将base64 转换为File

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

环球热门:JavaScript 将base64 转换为File

2023-01-10 18:08:46 来源：博客园

在 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对象。

先将base64转换为 Blob：

// 将base64 转换为Blobfunction 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对象，第二个参数是文件的名字。

再将Blob转换为 File：

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

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

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

关键词：文件类型构造函数可以使用