如何在Axios与Node.js环境下向前端传输图片二进制文件？

核心问题 #

后端请求外部图片接口时，Axios默认将二进制响应解析为UTF-8字符串，导致原始字节被转义成带双引号的字符串格式，最终返回给前端的不是可直接使用的二进制数据。

方案一：后端调整（推荐） #

修改后端的Axios配置，直接获取原始二进制数据，再正确返回给前端：

1. 调整后端请求外部接口的配置 #

const config = {
  method: 'get',
  url: `someExternalUrl/${payload}`,
  responseType: 'arraybuffer' // 关键：指定响应为二进制数组
};

return axios(config)
  .then(function (response) {
    // 直接返回原始二进制数据，不要做字符串处理
    return response.data;
  })
  .catch(function (error) {
    console.log(error);
  });

2. 设置正确的响应头（以Express为例） #

后端返回给前端时，需指定图片的MIME类型，让浏览器正确识别：

// 假设返回的是JPG图片，根据实际类型调整
res.setHeader('Content-Type', 'image/jpeg');
res.send(response.data);

这样前端保持原responseType: 'stream'配置，就能直接拿到可用的二进制流，无需额外转换。

方案二：前端补救处理（仅后端无法修改时使用） #

如果后端不能调整，前端需要把收到的转义字符串还原为二进制：

return axios({
  method: 'post',
  url: `someUrl/${payload}`,
  responseType: 'text' // 先以文本格式接收
})
  .then((resp) => {
    // 1. 去掉首尾的双引号
    const rawStr = resp.data.slice(1, -1);
    // 2. 解析转义字符为原始二进制内容
    const decodedStr = decodeURIComponent(escape(rawStr));
    // 3. 转为Blob对象，用于展示或下载
    const blob = new Blob([decodedStr], { type: 'image/jpeg' });
    // 可选：转为可直接用于img标签的URL
    return URL.createObjectURL(blob);
  })
  .catch((err) => err);

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