Node.js+Express如何存储Google Place Photo API图片并传给前端

我正在用Node.js开发基于Express的后端，这个后端需要调用Google Places API，根据目的地的搜索字符串获取图片，再把图片传给前端。

我的代码如下：

searchStr = 'Hilton hotel in Toronto';

// 从Google Places API获取图片引用
config = {
    method: 'get',
    url: `https://maps.googleapis.com/maps/api/place/textsearch/json?
          query=${searchStr}&key=${MY_API_KEY}`
    headers: {}
}
photo_ref = await axios(config).then(res => res.data.results[0]['photos'][0]['photo_reference']);

// 根据图片引用从Google Places获取图片
photoConfig = {
    method:'get',
    url: `https://maps.googleapis.com/maps/api/place/photo?
          photo_reference=${photo_ref}&key=${MY_API_KEY}`
    headers: {}
}
// 这里该怎么做？

调试后已经确认能拿到正确的图片引用，也生成了正确的photoConfig请求配置，但接下来不知道该怎么操作——怎么通过axios(photoConfig)获取图片格式的数据并传递给前端？

注：我用Express框架，向前端传数据的方式大概是res.send(some JSON)

解决方案 #

方式1：将图片转为Base64编码后放入JSON返回 #

这种方式适合把图片数据直接嵌入JSON响应，前端可直接用Base64字符串渲染图片。

修改代码如下：

// 获取图片二进制数据，指定responseType为arraybuffer
const photoResponse = await axios({
  ...photoConfig,
  responseType: 'arraybuffer' // 关键：告知axios返回二进制格式数据
});

// 将二进制数据转为Base64编码
const base64Image = Buffer.from(photoResponse.data, 'binary').toString('base64');
// 拼接图片的Data URI，需先获取响应的Content-Type
const imageMimeType = photoResponse.headers['content-type'];
const imageDataUri = `data:${imageMimeType};base64,${base64Image}`;

// 返回给前端
res.send({
  image: imageDataUri,
  // 可附加其他业务数据，比如酒店名称、地址等
});

前端拿到数据后，直接将image字段赋值给<img>标签的src属性即可渲染图片。

方式2：直接转发图片响应给前端 #

如果不想做Base64编码转换，可直接把Google Places返回的图片响应转发给前端，这种方式更节省服务器资源。

代码如下：

const photoResponse = await axios({
  ...photoConfig,
  responseType: 'stream' // 获取流格式的图片数据
});

// 复制Google返回的响应头，保证前端能正确解析图片
res.setHeader('Content-Type', photoResponse.headers['content-type']);
res.setHeader('Content-Length', photoResponse.headers['content-length']);

// 将图片流管道到Express响应对象，完成转发
photoResponse.data.pipe(res);

这种方式下，前端可以直接把该接口的URL作为<img>的src值，或者通过fetch请求后处理图片数据。

注意事项 #

• 确保你的Google Places API密钥已开启Places Photo API权限，否则会返回权限错误。
• 增加异常处理：比如搜索结果无图片、图片请求失败等场景，避免程序崩溃。
• Base64编码会使数据体积增加约30%，若图片较大，优先选择方式2。

内容的提问来源于stack exchange，提问作者Banned User