如何在React中展示从MongoDB获取的图片二进制数据？

客户端（React）处理步骤 #

核心是正确解析二进制响应数据，避免默认的文本解析导致乱码，然后将数据转换成可被<img>识别的格式：

方法1：使用fetch #

// 构造表单数据
const formData = new FormData();
formData.append('userId', '目标用户ID');
formData.append('file', 你的文件对象);

// 调用上传接口
fetch('/api/setImage', {
  method: 'POST',
  body: formData
})
.then(response => response.blob()) // 关键：将响应转为Blob格式
.then(blob => {
  // 将Blob转为浏览器可识别的临时URL
  const imageUrl = URL.createObjectURL(blob);
  // 赋值给组件state用于渲染
  setAvatarUrl(imageUrl);
})
.catch(err => console.error(err));

组件内渲染图片：

<img src={avatarUrl} alt="用户头像" />

方法2：使用axios #

import axios from 'axios';

const formData = new FormData();
formData.append('userId', '目标用户ID');
formData.append('file', 你的文件对象);

axios.post('/api/setImage', formData, {
  responseType: 'blob' // 关键：指定响应类型为blob
})
.then(response => {
  const imageUrl = URL.createObjectURL(response.data);
  setAvatarUrl(imageUrl);
})
.catch(err => console.error(err));

服务端（Node.js）优化建议 #

现有接口在POST上传后直接返回图片，虽能工作但不符合REST规范，建议拆分接口并优化逻辑：

1. 拆分出单独的图片获取接口 #

// GET接口：根据userId返回对应图片
app.get("/api/getImage/:userId", async (req, res) => {
  try {
    const userId = req.params.userId;
    const user = await userModel.findById(userId);
    
    if (!user || !user.img) {
      return res.status(404).send("图片不存在");
    }

    res.set("Content-Type", user.img.contentType);
    // 添加缓存头提升性能
    res.set("Cache-Control", "public, max-age=31536000");
    res.send(user.img.data);
  } catch (err) {
    console.log(err);
    res.status(500).send("服务器错误");
  }
});

客户端可直接通过<img src="/api/getImage/目标用户ID" alt="头像" />渲染图片，无需额外处理二进制数据。

2. 优化原上传接口逻辑 #

原接口存在重复读取文件的冗余操作，可简化：

app.post("/api/setImage", upload.single("file"), async (req, res) => {
  try {
    const userId = req.body.userId;
    // 仅读取一次文件
    const fileData = await fsp.readFile(req.file.path);
    
    await userModel.findByIdAndUpdate(userId, {
      img: {
        contentType: req.file.mimetype,
        data: fileData,
      },
    });

    // 上传成功返回状态即可，无需返回图片
    res.status(200).send({ message: "图片上传成功" });
  } catch (err) {
    console.log(err);
    res.status(500).send({ message: "上传失败" });
  }
});

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