React如何将Webcam拍摄的图片发送至Express后端接口

点击确认按钮无响应问题修复 #

你遇到的点击「Confirm Picture」连console.log都不触发的问题，和hooks逻辑无关，是DOM层级遮挡导致的：
拍摄完成后，你的代码先渲染包含确认文字的cameraCont容器，后渲染拍摄预览的img标签。如果预览图设置了撑满容器、绝对定位、更高层级的样式，会完全盖住上方的确认文字，点击事件根本绑定不到文字元素上。

直接调整JSX结构，把确认按钮放到预览图节点之后，保证按钮在预览图上层可点击即可，调整后的预览部分代码：

// 删掉原来单独写的isCapture判断里的Confirm段落，把确认按钮和预览图放一起
{imgSrc && (
  <div className={styles.previewWrap}>
    <img src={imgSrc} alt="作物拍摄预览" />
    {isCapture && <p onClick={confirmPicture} className={styles.confirmBtn}>Confirm Picture</p>}
  </div>
)}

对应样式给confirmBtn加足够高的z-index，设置可点击的鼠标样式，改完之后点击就能正常触发confirmPicture里的逻辑，不需要额外加useEffect处理点击事件。

前端上传逻辑实现 #

摄像头组件返回的imgSrc是base64编码的图片字符串，上传必须用POST请求（GET无请求体，无法承载大体积图片数据），直接在confirmPicture里写请求逻辑即可：

// 先把函数改成async方便处理异步请求
const confirmPicture = async () => {
  try {
    const response = await fetch("http://localhost:4000/saveImg", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        imgData: imgSrc,
        // 可额外追加需要传给后端的业务参数，比如拍摄位置、作物类型等
      }),
    });
    const result = await response.json();
    if (result.code === 200) {
      alert("图片上传保存成功");
      // 这里可以加上传成功后的页面跳转、状态重置逻辑
      setIsCapture(false);
      setImgSrc(null);
    }
  } catch (err) {
    console.error("上传失败：", err);
    alert("图片上传失败，请重试");
  }
};

*本地调试跨域处理：后端需要安装并配置cors包，同时放大JSON请求体的体积限制（base64图片体积较大，默认1mb的限制会报错），后端入口文件加以下配置：

const cors = require("cors");
app.use(cors());
// 允许最大10mb的请求体，足够承载高清拍照的base64数据
app.use(express.json({ limit: "10mb" }));

后端接口改造 #

把你原来的GET路由改成POST路由，接收base64数据转成图片文件存到服务器即可，示例代码：

const fs = require("fs");
const path = require("path");

// 提前在后端项目根目录新建uploads文件夹，用来存上传的图片
app.post("/saveImg", (req, res) => {
  try {
    const { imgData } = req.body;
    // 去掉base64的文件头前缀，拿到纯图片编码内容
    const pureBase64 = imgData.replace(/^data:image\/jpeg;base64,/, "");
    // 用时间戳生成文件名，避免重名覆盖
    const fileName = `plant_detect_${Date.now()}.jpeg`;
    const saveFullPath = path.join(__dirname, "uploads", fileName);

    // 写入文件到服务器
    fs.writeFile(saveFullPath, pureBase64, "base64", (writeErr) => {
      if (writeErr) {
        console.error("文件写入失败：", writeErr);
        return res.status(500).json({ code: 500, msg: "图片保存失败" });
      }
      res.json({
        code: 200,
        msg: "保存成功",
        data: {
          imgUrl: `/uploads/${fileName}`,
        },
      });
    });
  } catch (err) {
    console.error("接口异常：", err);
    res.status(500).json({ code: 500, msg: "服务异常" });
  }
});

注意事项 #

• 不要用useEffect处理本次上传逻辑：useEffect适合监听状态变化自动触发的逻辑，上传是用户点击主动触发的操作，直接写在点击回调里是最合理的实现
• 如果需要静态访问上传的图片，可以给uploads文件夹加静态资源映射：app.use('/uploads', express.static(path.join(__dirname, 'uploads')))
• 如果用axios替代fetch发请求，逻辑完全一致，不需要额外特殊配置

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