如何将MySQL数据库中Buffer类型图片转换为React前端可显示图片（Node.js+Sequelize技术栈）

我之前也碰到过一模一样的情况！后端用Sequelize存的Buffer图片直接返回给前端，React根本没法直接识别显示。别慌，给你两种可行的解决方案，推荐优先用后端处理的方式，更高效。

方案一：后端转换为Base64 Data URI（推荐） #

后端返回数据时，把Buffer格式的图片直接转换成浏览器能识别的Data URI字符串，前端拿到后直接用在img的src属性里就行。

修改你的后端路由代码：

router.get("/", validateToken, async(req,res) => { 
  const UserId = req.user.id; 
  console.log(UserId) 
  const listOfCollect = await Collections.findAll({ 
    where: { UserId: UserId, } 
  }); 

  // 遍历转换每个收藏项的图片Buffer为Base64 Data URI
  const formattedCollects = listOfCollect.map(item => {
    // 先把Sequelize实例转成普通JSON对象
    const plainItem = item.toJSON();
    if (plainItem.image) {
      // 注意：这里的mime类型要和你实际存储的图片格式匹配，比如png就用image/png
      plainItem.image = `data:image/jpeg;base64,${plainItem.image.toString('base64')}`;
    }
    return plainItem;
  });

  res.json(formattedCollects); 
});

改完后端后，你前端的渲染代码完全不用动，src={value.image}就能直接显示图片了！

方案二：前端处理Buffer数组转Base64 #

如果不想修改后端，也可以在前端把收到的Buffer数组（因为JSON序列化后Buffer会变成数值数组）转换成Data URI。

修改你的前端请求代码：

useEffect(() => { 
  axios.get("http://localhost:3001/collect", { 
    headers: { token: localStorage.getItem("token"), } 
  }).then((response) => { 
    // 处理每个收藏项的图片数据
    const formattedData = response.data.map(item => {
      if (item.image) {
        // 把数值数组转成Uint8Array
        const uint8Array = new Uint8Array(item.image);
        // 转换为Base64字符串
        let base64Str = '';
        uint8Array.forEach(byte => {
          base64Str += String.fromCharCode(byte);
        });
        const base64 = btoa(base64Str);
        // 拼接成Data URI，同样注意mime类型匹配
        item.image = `data:image/jpeg;base64,${base64}`;
      }
      return item;
    });
    setListOfCollect(formattedData); 
  }); 
}, []);

关键说明 #

• MIME类型匹配：上面的示例用的是image/jpeg，如果你的图片是PNG、GIF等格式，一定要改成对应的类型（比如image/png），否则图片会显示异常。
• 为什么之前显示不了？因为Sequelize的Buffer对象在JSON序列化后会变成一个纯数值数组，浏览器的img标签无法直接解析这种格式，必须转换成Data URI或者Blob URL才能识别。

内容的提问来源于stack exchange，提问作者Максим Баланцевич