使用JSBase64转换File的全面指南

小蓝 • 2024-12-11 01:07 • 编程

一、什么是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对象，该对象包含了原始文件的文件名和文件类型。最后，可以将新文件保存到本地文件系统中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/231728.html