получить размер 0 при создании файла в JavaScript

Question

Я пытаюсь создать файл из данных base64, которые я получаю из плагина камеры в Ionic. Я использую функцию, которую я получил из ответа другого стекопотока. Проблема в том, что созданный файл имеет размер: 0, а свойство name похоже на массив Uint8, который я передаю при создании.

Это функция для преобразования данных Base64: (первые две строки закомментированы, потому что данные не имеют начала «data: image / jpeg; base64,»)

_dataURLtoFile(dataurl, filename) {
    let //arr = dataurl.split(','),
        //mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(dataurl),
        n = bstr.length,
        u8arr = new Uint8Array(n);

    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:'image/jpeg'});
  }

вот что я получаю в консоли:

File {name: Array(1), localURL: "archivo", type: {…}, lastModified: null, lastModifiedDate: null, …}
end: 0
lastModified: null
lastModifiedDate: null
localURL: "archivo"
name: [Uint8Array(268175)]
size: 0
start: 0
type: {type: "image/jpeg"}
__proto__: Object

Answer 1

Основываясь на комментариях к вопросу о том, что File был перезаписан, я изменил функцию, чтобы использовать Blob вместо File, тогда он сгенерирует File из этого.

В демонстрационных целях я также переопределил значение по умолчанию File другой функцией.Я также заставил его вывести файл в DOM, чтобы показать, что он загрузил правильные данные.

window.File = () => 'brokenfilefunction'
function dataURLtoFile(dataurl, filename) {
  let bstr = atob(dataurl),
      n = bstr.length,
      u8arr = new Uint8Array(n);

  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  // Something has overwritten File, so you can't use it
  // return new File([u8arr], filename, {type:'image/jpeg'});

  // Adding the blob to FormData converts it to an actual file
  const formData = new FormData();
  const blob = new Blob([u8arr], { type: 'image/jpeg' });
  formData.append(filename, blob);
  // Instead of getting the file, you could just send the formdata object in your request
  const actualFile = formData.entries().next().value[1];

  return actualFile;
}

const image = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';


const file = dataURLtoFile(image, 'name');
console.log(file);

// Display image in dom for demo
const fr = new FileReader();
fr.onload = function () {
   document.getElementById('image').src = fr.result;
}
fr.readAsDataURL(file);

File has correctly been initialized to red dot:
<img id="image" style="width: 10px; height: 10px;" />