File Content is missing while uploading as multipart/form-data using FETCH API

Question

I am trying to upload file to contentversion object using javascript with the help of FETCH API. I'm able to upload the file successfully but the content is not displaying. Please find the form structure below.

 const boundary = "YUTBT567TYHT";
 let data = "";
 data += `--${boundary}\r\n`;
 data += `Content-Type:application/octet-stream\r\n`;
 data += `Content-Disposition: form-data; name="VersionData";`+ 
         `filename="${this.allFiles[0].filename}"\r\n`;
 data += '\r\n';
 data +=  this.allFiles[0].base64 + '\r\n';
 data += `--${boundary}\r\n`;
 data += 'Content-Disposition: form-data; ' + `name="entity_content";\r\n`
 data += `Content-Type: application/json\r\n`;
 data += '\r\n';
 data += '{\r\n';
 data += '"ReasonForChange" : "Marketing materials updated",\r\n';
 data += '"PathOnClient" : "'+this.allFiles[0].filename+'"\r\n';
 data += '}\r\n';                
 data += `--${boundary}--`;
 console.log('data-->'+data);
 fetch(url, { 
     method: "POST",            
     headers: {
          'Authorization': bearer,                
           'Content-Type': 'multipart/form-data; boundary='+boundary
     },
     body : data
 })
.then((response) => console.log(response.json()))
.then((resultdata) => {
    console.log('resultdata-->',resultdata);
});

How to uploading the file without corrupting content from Javascript ?