Блог

Я пытаюсь отправить снимок веб-камеры react на сервер и при этом использую JSON.stringify() для отправки вывода base64 с react getScreenshot() на экспресс-сервер, а затем преобразую base64 в буфер, а затем в файл. Но после этого я все равно получаю сообщение об ошибке при открытии изображения, что файл изображения не поддерживается. Я также пытался использовать sharp и получил сообщение об ошибке, что входные данные из буфера содержат неподдерживаемый формат изображения. ниже приведен мой клиентский код и код сервера.

 const capture = React.useCallback(async () => {
const imageSrc = webcamRef.current.getScreenshot();
await sendData(imageSrc);


 const sendData = async data => {
// console.log(data);
const image = JSON.stringify(data);
const res = await axios({
  method: 'POST',
  url: 'http://127.0.0.1:5000/api/v1/images',
  data: { name: image }
});

console.log(res.data);
 

};

на сервере этот код.

 const data = JSON.parse(req.body.name);
const buff = Buffer.from(data, 'base64');
await sharp(buff).toFile('output.png')
await fs.writeFileSync('felix.jpeg', buff);
 

пример данных, которые я отправляю на сервер, — это просто строка base64. Ниже приведен пример. Строка слишком длинная, чтобы я мог вставить ее сюда, поэтому вместо этого я вставляю скриншот . Когда этот base64 достигнет сервера, мне нужно будет скрытно буферизировать и передать файл или передать его sharp.js. И вот тут-то у меня и возникает проблема