FileReader не работает в Angular 2

Question

Я пытаюсь загрузить изображение, используя FileReader, оно отлично работает в режиме отладки (когда установлена ​​точка останова на линии this.name = Image.files[0].name;), но не работает, если я деактивирую точку останова. testDetails.image получает пустую строку. Я пробовал setTimeout также, его тоже не работает.

var fileByteArray = '';
const Image = this.AccUserImage.nativeElement;

if (Image.files && Image.files[0]) {
    this.AccUserImageFile = Image.files[0];
}


var fileReader = new FileReader();
fileReader.onload = function (event) {
    var imageData = fileReader.result;
    var bytes = new Uint8Array(imageData);
    //for (var i = 0; i < bytes.length; i++) {
    for (var i = 0; i < bytes.length; ++i) {
        fileByteArray += (String.fromCharCode(bytes[i]));
    }
};
if (fileReader && Image.files && Image.files.length) {
    fileReader.readAsArrayBuffer(Image.files[0]);
    }
}

this.name = Image.files[0].name;
const ImageFile: File = this.AccUserImageFile;

let length = this.form.value.addresses.length;
this.testList = [];
for (let i = 0; i < length; i++) {
    let testDetails = new testDto();
    testDetails.image = btoa(fileByteArray);
}

Answer 1

Были некоторые проблемы в текущей реализации, я публикую ниже рабочий код. Первая проблема заключалась в том, что я использовал стиль JavaScript для вызова функции onload. Вторая проблема заключалась в том, что мне пришлось поместить весь код в функцию onload, потому что readAsArrayBuffer - это асинхронный вызов.

var fileByteArray = '';
const Image = this.AccUserImage.nativeElement;
if (Image.files && Image.files[0]) {
    this.AccUserImageFile = Image.files[0];
}
var fileReader = new FileReader();

fileReader.onload = (e) => {
    var imageData = fileReader.result;
    var bytes = new Uint8Array(imageData);
    for (var i = 0; i < bytes.length; ++i) {
        fileByteArray += (String.fromCharCode(bytes[i]));
    }

    this.name = Image.files[0].name;
    const ImageFile: File = this.AccUserImageFile;
    let length = this.form.value.addresses.length;
    this.testList = [];
    for (let i = 0; i < length; i++) {
        testDetails.image = btoa(fileByteArray);
    }
}
fileReader.readAsArrayBuffer(Image.files[0]);

Answer 2

Может быть, тест должен находиться в конце функции fileReader.load, потому что ваш тест зависит от того, чтобы функция fileReader.onload была завершена хотя бы один раз, чтобы fileByteArray не был неопределенным.

fileReader.onload = function (event) {
    var imageData = fileReader.result;
    var bytes = new Uint8Array(imageData);
    for (var i = 0; i < bytes.length; ++i) {
        fileByteArray += (String.fromCharCode(bytes[i]));
    }
    if (fileReader && Image.files && Image.files.length) {
      fileReader.readAsArrayBuffer(Image.files[0]);
    }
    for (let i = 0; i < length; i++) {
      let testDetails = new testDto();
      testDetails.image = btoa(fileByteArray);
    }
};