Как отправить изображение jpg на сервер с реагирующей камерой?

Question

Моя цель - загрузить изображение, снятое с веб-камеры, в функцию Lambda, которая затем загрузит его в AWS S3.

Кажется, что лямбда-функция работает, когда я тестирую ее, однако я не могу понять, что именно нужно передать через камеру React.
Или, если я отправляю через правильный формат, чтобы загрузить его.

import Camera from 'react-camera';

..
Это JSX

<Camera
  ref={(cam) => {
    this.camera = cam;
  }}
>
  <Button onClick={this.takePicture}>
    <i className="fas fa-camera"></i> &nbsp; Take photo
  </Button>
</Camera>

Это код реакции, который вызывается, когда они делают фотографию

takePicture = () => {
  this.camera.capture()
    .then(blob => {
      console.log(blob);
      this.props.dispatch(uploadImage(blob))
    })
}

Функция uploadImage в моем действии:

export const uploadImage = (fileObj) => dispatch => {

  return fetch(url, {
    method: 'POST',
    headers: {
      'Accept': 'image/jpeg'
    },
    body: fileObj
  })
    .then((response) => response.json())
    .then(function (response) {
      if (response.status === 'success') {
        console.log(response);
        // ... Show feedback
        return response
      } else {
        // ... Show feedback
      }
    })
    .catch((error) => {
      console.error(error)
    });
}

Я полагаю, мне нужно загрузить изображение base64 ..? Я не понимаю, как я получаю это от blob

---

Вот код лямбда-функции для справки:

  var params = { 
    Bucket: 'bucketName', 
    Key: Date.now() + '.jpg',
    ContentType: 'image/jpeg',
    Body: event.body,
    ACL: "public-read"
  };
  return uploading = new Promise(function (resolve, reject) {
    return s3.upload(params, function (err, data) {
      if(err) {
        state.uploadError = err
        return reject({
          error: err,
          status: 'error',
          message: 'something went wrong'
        })
      }
      state.uploadData = data
      state.fileLocation = data.Location
      state.status = "success"
      state.message = "File has been uploaded to the fileLocation"
      return resolve(data)
    });
  })

Вопрос:

Как мне сделать правильный формат blob таким образом, чтобы при POST ed как body это был правильный формат изображения?

Answer 1

Очень хорошо организованный вопрос и код ... спасибо!

Обновлено:
Используйте модуль файловой системы, чтобы прочитать файл и указать кодировку.

const fs = require('fs');

takePicture = () => {
  this.camera.capture()
    .then(blob => {
      console.log(blob);
      const image = fs.readFileSync(blob.path);
      const b64Image = Buffer.from(image).toString('base64');
      this.props.dispatch(uploadImage(b64image));
    })
}