Fetch API is modifying request body inconsistently

Question

I'm trying to upload an arbitrary list of files:

for (let i=0;i<files.length;i++) {
  let fileTypeToUse = files[i].type;
  fetchWithRetry(url, 1000, 2, {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'Content-Type': fileTypeToUse
    },
    body: files[i],
  }
}

This works for most file types (including images) by taking the bytes and sending them in the body of the request. But when I try to upload audio of type "audio/mpeg" my server receives a file which is about 60% larger than I expected.

I initially assumed this meant the file was being base64 encoded by the browser, so I tried to decode the file. Unfortunately, this hypothesis seemed to be incorrect. I received a decoding error on the server: base64.StdEncoding.Decode: illegal base64 data at input byte 3

For reference, here is a screenshot of the files object I am trying to upload:

And here is the oversized object being sent by the browser to the server:

Related issue: https://stackoverflow.com/a/40826943/12713117 Unfortunately they are encouraging people to upload the file with form/multipart instead of directly uploading the file.

I have 2 questions. First, why is the uploaded object larger than the file accessible in javascript? Second, how do I know if an arbitrary file will be sent as-is (which is the case with images) or if it will be encoded and need decoding on the server?

Fetch With Retry Code

function fetchWithRetry(url, delay, tries, fetchOptions = {}) {
    return fetch(url, fetchOptions).catch((err) => {
        let triesLeft = tries - 1;
        if (triesLeft == null || triesLeft < 1) {
            throw err;
        }
        return wait(delay).then(() => fetchWithRetry(url, delay * 2, triesLeft, fetchOptions));
    });
}