一、什么是JSBase64
JSBase64是JS中一种可将二进制数据编码为ASCII字符串的方式。它由一个Base64加上索引表组成,可以使用它来对二进制数据进行编码和解码。
在JavaScript中,可以使用atob()和btoa()内置函数来将二进制数据编码为ASCII字符串,但是它们并不支持Unicode字符。JSBase64则解决了这个问题。
JSBase64可以将二进制数据编码为安全的ASCII字符串,使其在文本协议下进行传输。此外,JSBase64还可用于加密和数据签名等用途。
二、转换File为Base64
当需要将文件转换为Base64字符串时,可以使用FileReader对象。下面是一个示例:
function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => resolve(reader.result) reader.onerror = error => reject(error) }) }
这个函数接受一个File对象并返回一个Promise。该函数使用FileReader对象读取文件,并在读取完成时返回Base64字符串。
三、Base64转换为File
要将Base64字符串转换为File对象,可以使用以下函数:
function base64ToFile(base64, filename, mimeType) { const byteCharacters = atob(base64.replace(/^data:.*?;base64,/, '')) const byteNumbers = new Array(byteCharacters.length) for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i) } const byteArray = new Uint8Array(byteNumbers) return new File([byteArray], filename, { type: mimeType }) }
这个函数接受3个参数:Base64字符串、文件名和文件类型。函数将Base64字符串转换为二进制数组,然后创建一个File对象并返回它。
四、Base64转换为Blob
如果不需要创建File对象,而是需要创建Blob对象,则可以使用以下函数:
function base64ToBlob(base64, mimeType) { const byteCharacters = atob(base64.replace(/^data:.*?;base64,/, '')) const byteNumbers = new Array(byteCharacters.length) for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i) } const byteArray = new Uint8Array(byteNumbers) return new Blob([byteArray], { type: mimeType }) }
这个函数接受2个参数:Base64字符串和文件类型。函数将Base64字符串转换为二进制数组,然后创建一个Blob对象并返回它。
五、将Base64保存为文件
要将Base64字符串保存为文件,可以创建一个Blob对象并将其插入到链接元素中。下面是一个示例:
function saveBase64AsFile(base64, filename, mimeType) { const blob = base64ToBlob(base64, mimeType) const link = document.createElement('a') link.setAttribute('href', URL.createObjectURL(blob)) link.setAttribute('download', filename) link.click() }
这个函数接受3个参数:Base64字符串、文件名和文件类型。函数将Base64字符串转换为Blob对象,并创建一个链接元素。在创建了链接元素之后,可以通过调用click()方法来下载文件。
六、Base64和File的转换示例
下面是一个完整的代码示例,它演示了如何将文件转换为Base64字符串,然后将Base64字符串转换为File对象并将其保存到本地文件系统中:
const fileInput = document.querySelector('#file-input') const saveButton = document.querySelector('#save-button') fileInput.addEventListener('change', async () => { const file = fileInput.files[0] const base64 = await fileToBase64(file) const newFile = base64ToFile(base64, file.name, file.type) saveButton.addEventListener('click', () => { saveBase64AsFile(base64, file.name, file.type) }) })
这个示例使用了异步函数和事件监听器。首先,它获取了一个文件对象并将其转换为Base64字符串。然后,它使用转换后的Base64字符串创建了一个新的File对象,该对象包含了原始文件的文件名和文件类型。最后,可以将新文件保存到本地文件系统中。