JS中如何将base64转换成file

将base64转换成file的过程主要可分为以下两步：

1. 将base64字符串转换成二进制数据
2. 将二进制数据转换成file对象

下面是具体的代码实现。

将base64字符串转换成二进制数据

我们可以使用atob函数将base64字符串转换成二进制数据。在JS中，base64字符串常常会作为"data:image/png;base64,"、"data:image/jpeg;base64,"等格式的图片数据存在，我们需要先将这些格式的前缀去除。

let base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAQAAA...'
let data = base64Data.replace(/^.*?,/, '') // 去除前缀
let binaryData = atob(data)

将二进制数据转换成file对象

要将二进制数据转换成file对象，我们需要使用Blob对象。Blob对象表示一段二进制数据，并且可以设置类型、大小、字节等元数据。具体实现如下：

let blob = new Blob([binaryData], { type: 'image/png' })
let file = new File([blob], 'sample.png', { type: 'image/png', lastModified: new Date().getTime() })
console.log(file)  // 输出file对象

在上面的代码中，我们使用Blob构造函数根据二进制数据新建一个Blob对象，设置type属性为图片类型（image/png），然后将Blob对象放入一个新的File对象（这里设置filename为"sample.png"，type同样为"image/png"）中，最后获得转换后的file对象。

下面是一个完整的示例，我们将一张已有的图片转换成file对象，然后将其输出至控制台：

<img id="myImg" src="sample.png">

let img = document.getElementById('myImg')
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
let base64Data = canvas.toDataURL('image/png')
let data = base64Data.replace(/^.*?,/, '') // 去除前缀
let binaryData = atob(data)
let blob = new Blob([binaryData], { type: 'image/png' })
let file = new File([blob], 'sample.png', { type: 'image/png', lastModified: new Date().getTime() })
console.log(file)  // 输出file对象

在这个示例中，我们将一张图片渲染在canvas中，并以PNG格式导出其base64字符串，最后利用上面提到的两步，将base64字符串转换成file对象。