2

I don't know how to send a image to express server via post when i capture a image from react-webcam lib, someone can help me? I'm tried to convert to base64, but it's not works as expected, i can't finding a way to do this, and i don't know what i'm doing wrong, i'm tried to use JSON, but it also doesn't works.

Thanks guys

...
Takecapture = async() {
    var screenshot = this.webcam.current.getScreenshot();
    console.log(screenshot.toString())
    var data = screenshot.toString().replace(/^data:image\/jpg;base64,/, "");
    var buf = Buffer.from(data, 'base64');
    fetch('/photo', {
      method: 'POST',
      data: { base64:buf }
    }).then(
      ()=>{console.log('screenshot sended sucessfully')}
    )
}

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

server.js

app.post('/photo',(req, res, next)=>{
  buf = req.data.base64;
  fs.writeFile(__dirname+'/webapp/public/photos/face_caption.png', buf, (err)=>{})
  res.status(200).send('image writed')
})

I'm receiving this error(500) from server:

TypeError: Cannot read properties of undefined (reading 'base64')
    at /mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/server.js:20:18
    at Layer.handle [as handle_request] (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/layer.js:95:5)
    at next (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/layer.js:95:5)
    at /mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/index.js:335:12)
    at next (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/index.js:275:10)
    at /mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/server.js:11:3
    at Layer.handle [as handle_request] (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/layer.js:95:5)
TypeError: Cannot read properties of undefined (reading 'base64')
    at /mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/server.js:20:18
    at Layer.handle [as handle_request] (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/layer.js:95:5)
    at next (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/layer.js:95:5)
    at /mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/index.js:335:12)
    at next (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/index.js:275:10)
    at /mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/server.js:11:3
    at Layer.handle [as handle_request] (/mnt/c/Users/RenanPC/Documents/Projetos/ProjetoReact/docapp/node_modules/express/lib/router/layer.js:95:5)
ReZ
  • 313
  • 1
  • 3
  • 13
  • A few things that might be wrong with this implementation but you can start from fixing the `fetch` usage. There is no actual `data` field for the `fetch` options. It should be `body` and converted to JSON. Read more about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/fetch). `fetch('/photo', { body: JSON.stringify({ base64:buf }) })` – Harry Theo Nov 10 '21 at 16:29
  • Then in your express server, if you are using [body-parser](http://expressjs.com/en/resources/middleware/body-parser.html) (if not using any JSON parsers you should) you can access the body like this: `req.body.base64` – Harry Theo Nov 10 '21 at 16:32
  • ```Access to fetch at 'http://localhost:3001/detect-similarity' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.``` i'm having this error – ReZ Nov 10 '21 at 20:57
  • In express server is showing ```request entity is too large``` – ReZ Nov 10 '21 at 21:14
  • For CORS error look at [this article](https://flaviocopes.com/express-cors/). – Harry Theo Nov 11 '21 at 23:06
  • About the `request entity is too large` error see [this answer](https://stackoverflow.com/a/69929804/7380613) if you used `body-parser` – Harry Theo Nov 11 '21 at 23:09
  • 1
    Thank you man, i already found the error, i did post a file to server, and not a image, that was the problem. – ReZ Nov 12 '21 at 13:35

0 Answers0