使用JSBase64轉換File的全面指南

一、什麼是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對象，該對象包含了原始文件的文件名和文件類型。最後，可以將新文件保存到本地文件系統中。