转换-字符串和Base 64的转换

前后端平时使用 base64，主要应该有两个场景吧：

混淆字符(因为Base 64不是加密，是可以解码的，所以只能是混淆而不是加密)，用于前后端数据传输、加密中的一步等等。
展示图片，比如从 canvas 生成的图片提供下载功能。

上面也对应了用来做 Base 64 处理的两种的格式：字符串和图像资源。

这里主要研究一下字符的 Base 64 的编码和解码。

先提一下js进行base64操作的第三方库，支持前端和nodejs，下面所有的操作，都可以直接使用它来实现：js-base64。

前端字符串转 Base 64

方法一：btoa编码和 atob 解码（不支持中文）

前端最直接的方法是 window.btoa(编码) 和 window.atob(解码) 两个方法：

typescript 复制代码

const text = 'hello world'

// 编码转为 base64
const base64 = window.btoa(text)
console.log(base64)
// aGVsbG8gd29ybGQ=

// 解码还原为 字符串
const resource = window.atob(base64)
console.log(resource)
// hello world

但注意，这两个方法不支持中文汉字：

typescript 复制代码

// 用来编码中文，直接报错
window.btoa('跳跳')
// 报错：Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

// 解码中文生成的base64：
const base64 = '6Lez6Lez' // 使用 跳跳 两个汉字编码生成的base64
// 使用下面方法解码，打印的字符串无法解读
console.log(window.atob(base64))
// è·³è·³

所以，如果前端需要对中文进行编码和解码，有下面几种方法：

直接使用上面提到的 js-base64 这个第三方库。
网上找方法，自己原生实现base64编码，算法比较复杂。
使用下面稍后提到的 FileReader 方法来编码(但只能编码，不能用来解码)。
或者使用 url 编码来中转一下，把中文先替换成其他符号：

typescript 复制代码

const text = '跳跳'

// 先进行url编码，再进行base64编码
let base64 = window.btoa(encodeURI(text))
// JUU4JUI3JUIzJUU4JUI3JUIz

// 再进行base64解码，再进行url解码
let resource = decodeURI(window.atob(base64))
// 跳跳

方法二：使用 FileReader 对象来中转(支持中文)

可以使用 FileReader 这个前端工具来中转一下。

其实也不止，具体过程，是就是先转为 Blob，再使用 FileReader 对 Blob 进行 readAsDataURL，得到 DataUrl(Base64链接)，再用字符分隔从中提取出Base64。

使用这种方法，可以对中文进行base64编码。

typescript 复制代码

/**
 * 字符串转Base64
 * @param string 要转为base64的字符串
 * @returns 
 */
async function str2Base64(string: string): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.readAsDataURL(new Blob([text], {type: 'text/plain'}))
    fileReader.onload = () => {
      try {
        let base64Url = fileReader.result as string
        let base64 = base64Url.split('base64,')[1]
        resolve(base64)
      } catch (error) {
        reject(error)
      }
    }
    fileReader.onerror = (error) => {
      reject(error)
    }
  })
}

// 编码转为 base64
const text= '跳跳'
const base64 = await str2Base64(text)
console.log(base64)
// 6Lez6Lez

前端 Base 64 转字符串

这个只能使用 atob 来解码了，但它不支持中文：

typescript 复制代码

const text = 'hello world'

// 编码转为 base64
const base64 = window.btoa(text)
console.log(base64)
// aGVsbG8gd29ybGQ=

// 解码还原为 字符串
const resource = window.atob(base64)
console.log(resource)
// hello world

但其实，如果使用一个已经被废弃的前端api，也是可以解码中文的：

typescript 复制代码

const base64 = '6Lez6Lez' // 跳跳 两个中文的base64值
// 直接解码，解码处理的无法阅读
const toBase = window.atob(base64)
console.log(toBase)
// è·³è·³

// 把那个乱码的值再进一步处理，使用废弃的api——escape处理后，再url解码，完成
console.log(decodeURIComponent(escape(toBase)))
// 跳跳

最终建议，前端还是使用 js-base64 处理。

后端字符串转 Base 64

直接使用 Buffer 对象，超级简单，但有两种base64格式：

typescript 复制代码

const buffer = Buffer.from('阿飞1')

console.log(buffer.toString('base64'))
// 6Zi/6aOeMQ==

console.log(buffer.toString('base64url'))
// 6Zi_6aOeMQ

toString 时的两种格式：

base64：原样base64的值，因为base64的位数有分组，每一组字符有规定，如果缺位，那后面可能会补等于号=。
base64url：表示这个base64的值需要作为url传输，所以会把base64中可能出现的+/=等url无法传递的字符进行替换，后面补充的等于号也会去掉。

后端 Base 64 转字符串

同上，使用Buffer：

typescript 复制代码

const buffer = Buffer.from('阿飞1')

let base64 = buffer.toString('base64')
// 6Zi/6aOeMQ==
console.log(Buffer.from(base64, 'base64').toString())
// 阿飞1

let base64url = buffer.toString('base64url')
// 6Zi_6aOeMQ
console.log(Buffer.from(base64url, 'base64url').toString())
// 阿飞1

更新时间：2023/05/30 14:37:33

本页目录