Конвертировать BLOB-объект в base64, чтобы сохранить его в базе данных

Question

Я сейчас пытаюсь записать данные в мою базу данных .Я использую модуль base64 npm, чтобы перевести мой BLOB-объект в стандарты Base64, а затем сохранить его в базе данных.

Но когда я отправлял свои записи в свою базу данных, методы Get / * возвращали мне одинаковый необработанный текст для каждой записи. Обратите внимание, что я сделал записи в другом сеансе, а не в той же отправленной области m:

Здесь возвращение моей базы данных:

[{"_id": "5b09c5a9db6839382475442b", "звук": { "типа": "буфер", "данные": [87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]}, "__ v": 0}, { "_ идентификатор": "5b09c5b7db6839382475442c", "звук": { "типа": "буфер", "данные": [87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]}, "__ v": 0}, { "_ идентификатор": "5b09c5c4db6839382475442d", "звук": { "типа":»Буфер " "данные": [87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]}, "__ v": 0}, {" _ идентификатор":" 5b09c69bdb6839382475442e», "звук": { "типа": "буфер", "данные": [87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]}, "__v": 0}, (... и т. Д.)

Интересно, что может вызвать такое поведение.

В настоящее время я пытаюсь напрямую получить URL-адрес данных и получить двоичный текст непосредственно из него в виде - псевдокода:

 blob:http://localhost:[path]
-> then retrieve data in this path 
-> then store in database data retrieved

Между тем, здесь мой App.js:

class RecordingAPI extends React.Component {
  constructor(props) {
    super(props);
    this.deleteAudio = this.deleteAudio.bind(this);
    this.handleSubmit=this.handleSubmit.bind(this);
    this.state = {
      recording: false,
      audios: [],
      blob : {}
    };
  }
  handleSubmit(e){
   e.preventDefault();


   Axios.post("/api/words",{
                           "sound":this.state.blob
                         })
   //.then((res) => res.json())
   .then((data) => console.log(data))
  //pass submitted value to true in order to declench allDelete function

    alert("Message sent, congratulation =)")
    //this.state.deleteAll();

 this.deleteAll();
 }

  async componentDidMount() {
    const stream = await navigator.mediaDevices.getUserMedia({audio: true});
    // show it to user
    this.audio.src = window.URL.createObjectURL(stream);
    this.audio.play();
    // init recording
    this.mediaRecorder = new MediaRecorder(stream);
    // init data storage for video chunks
    this.chunks = [];
    // listen for data from media recorder
    this.deleteAll=this.deleteAll.bind(this) ;
    this.mediaRecorder.ondataavailable = e => {
      if (e.data && e.data.size > 0) {
        this.chunks.push(e.data);
      }
    };
  }

  startRecording(e) {
    e.preventDefault();
    // wipe old data chunks
    this.chunks = [];
    // start recorder with 10ms buffer
    this.mediaRecorder.start(10);
    // say that we're recording
    this.setState({recording: true});
  }

  stopRecording(e) {
    e.preventDefault();
    // stop the recorder
    this.mediaRecorder.stop();
    // say that we're not recording
    this.setState({recording: false});
    // save the video to memory
    this.saveAudio();

  }

  saveAudio() {
    // convert saved chunks to blob
    const blob = new Blob(this.chunks, {type: audioType});
    // generate video url from blob
    const audioURL = window.URL.createObjectURL(blob);
    console.log(audioURL); 
    // append videoURL to list of saved videos for rendering
    const audios = this.state.audios.concat([audioURL]);
    this.setState({audios});
    var blob64 = Base64.encode(blob);
    this.setState({blob : blob64})

  }

Спасибо.