react-webcam捕获图片POST发送到Express服务端出现base64读取错误如何解决？

核心错误原因 #

• 前端fetch API用法错误：fetch配置项传递请求体的参数是body不是data，且直接传递Buffer对象无法被JSON序列化，不需要在前端提前转Buffer
• 前端缺少请求头声明，没有指定Content-Type: application/json，服务端无法正确解析JSON格式的请求体
• 服务端未配置Express JSON解析中间件，无法自动解析请求体内容到req.body
• 服务端取参数的对象错误：Express解析后的请求体挂载在req.body上，不是req.data
• 正则匹配错误：react-webcam返回的jpeg格式base64前缀是data:image/jpeg;base64,，原有正则匹配jpg会导致前缀没有被移除，转Buffer会失败
• 其他逻辑问题：采集的是jpeg格式图片，存储时用了png后缀，且没有错误捕获逻辑，写文件失败也无法感知

修正后的前端代码 #

Takecapture = async() => {
    try {
      const screenshot = this.webcam.current.getScreenshot();
      // 直接保留base64字符串即可，不需要前端转Buffer，调整正则匹配jpeg
      const base64Data = screenshot.replace(/^data:image\/jpeg;base64,/, "");
      await fetch('/photo', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        // 用body参数传值，先转成JSON字符串
        body: JSON.stringify({ base64: base64Data })
      })
      console.log('screenshot sended sucessfully')
    } catch (err) {
      console.error('请求失败', err)
    }
}

render(){
  return(
    <Webcam
                id='inputVideo'
                ref={this.webcam}
                audio={false}
                style={{borderRadius: '350px'}}
                height={400}
                width={200}
                videoConstraints={videocons}
                screenshotFormat='image/jpeg'
              />);
}

修正后的服务端代码 #

// 所有路由之前先配置JSON解析中间件，设置请求体大小上限避免图片被拦截
app.use(express.json({ limit: '10mb' }))

app.post('/photo',(req, res, next)=>{
  try {
    const base64Data = req.body.base64;
    // 服务端转Buffer再写文件，后缀改为jpg和采集格式对应
    const buf = Buffer.from(base64Data, 'base64');
    fs.writeFile(__dirname+'/webapp/public/photos/face_caption.jpg', buf, (err)=>{
      if (err) {
        console.error('写文件失败', err)
        return res.status(500).send('image write failed')
      }
      res.status(200).send('image writed')
    })
  } catch (err) {
    console.error('接口报错', err)
    res.status(500).send('server error')
  }
})

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