Convert a blob in base64 in order to store it in database

Question

I try currently to recording data in my database. I use base64 npm module to translate my blob in base64 standards then store it into the database.

But when I sent my records to my database, the Get/* methods returns me exactly the same raw text for each records. Note that I have made the records on differents session, not in the same sent-stream :

Here the return of my database :

[{"_id":"5b09c5a9db6839382475442b","sound":{"type":"Buffer","data":[87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]},"__v":0},{"_id":"5b09c5b7db6839382475442c","sound":{"type":"Buffer","data":[87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]},"__v":0},{"_id":"5b09c5c4db6839382475442d","sound":{"type":"Buffer","data":[87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]},"__v":0},{"_id":"5b09c69bdb6839382475442e","sound":{"type":"Buffer","data":[87,50,57,105,97,109,86,106,100,67,66,67,98,71,57,105,88,81,61,61]},"__v":0}, (... and so on)

I wonder what can produce this behavior.

I try currently to directly retrieve the data URL and retrieve the binary text directly from it as - pseudo code :

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

Meanwhile, here my 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})

  }

Thanks.