如何将 FetchAPI 解析的 Blob 结果转换为 Base64

Question

拥有这个

module.exports

文件，它可以从 API 端点获取图像。然后，API 结果被解析为 blob。解析 Blob 对象后如下所示：

Blob {
  [Symbol(type)]: 'image/jpeg',
  [Symbol(buffer)]:
   <Buffer ff d8 ff db 00 43 00 08 06 06 07 06 05 08 07 07 07 09 09 08 0a 0c 14
0d 0c 0b 0b 0c 19 12 13 0f 14 1d 1a 1f 1e 1d 1a 1c 1c 20 24 2e 27 20 22 2c 23 1c
 ... > }

这是代码：

// Pre Configuration
const fetch = require('node-fetch')

module.exports = async (req, res, photoKey) => {
    let photoUrl = null
    const apiURL = "https://media.heartenly.com/stg/CACHE/sc_thumb"
    const requestURL = `${apiURL}/${photoKey}`
    const response = await fetch(requestURL)
    const data = await response.blob()
    console.log(data)
}      

现在我想做的是返回返回的blob的base64 URL格式，有什么想法吗？

Answer 1

查看节点获取，看起来不可能获取 Blob 缓冲区，因此，最好的选择是执行以下操作

1. 使用response.buffer而不是response.blob
2. 使用toString('base64')获取base64格式的数据

换句话说：

const fetch = require('node-fetch');

module.exports = async (req, res, photoKey) => {
    let photoUrl = null;
    const apiURL = "https://media.heartenly.com/stg/CACHE/sc_thumb";
    const requestURL = `${apiURL}/${photoKey}`;
    const response = await fetch(requestURL);
    const data = await response.buffer()
    const b64 = data.toString('base64');
    console.log(b64);
}; 

Answer 2

由于 Node 中的 fetch API 现已达到实验性支持（默认启用）（Node 18），现在无需外部库的帮助即可实现：

module.exports = async (req, res, photoKey) => {
    let photoUrl = null
    const apiURL = "https://media.heartenly.com/stg/CACHE/sc_thumb"
    const requestURL = `${apiURL}/${photoKey}`
    const response = await fetch(requestURL)
    const buffer = await response.arrayBuffer();
    const base64 = Buffer.from(buffer).toString('base64');
    console.log(data)
} 

这里的区别在于，响应不是解析为 blob，而是解析为 arrayBuffer。您可能还想使用这种方法，因为 node-fetch 的 response.buffer() 方法已被弃用