Метод добавления FormData не работает в Angular

Question

У меня есть приложение Angular, в котором я хочу осуществить загрузку изображений на сервер. Я застрял в момент, когда я должен добавить выбранный файл к вновь созданным FormData. Вот моя часть, относящаяся к компоненту TypeScript:

imageData: File = null;
avatar = null;

fileProgress(fileInput: any) {
  this.imageData = <File>fileInput.target.files[0];
  this.avatar = new FormData();
  this.avatar.append('avatar', this.imageData);
  console.log(this.avatar, this.imageData)
}

Это то, что появляется в консоли - FormData {} File {name: "background.jpg", lastModified: 1579183010623, lastModifiedDate: Thu Jan 16 2020 15:56:50 GMT+0200, webkitRelativePath: "", size: 8272, …}

Так что в принципе я не понимаю, почему я не могу добавить уже существующий this.imageData со значением this.avatar, когда я пытаюсь добавить его, его значение не меняется, и у меня все еще есть пустой массив = FormData {}. Любая помощь будет оценена.

Answer 1

Добавление значения к «аватару» в FormData добавляет значение к ключу «аватара». Если вы хотите получить значения в данном ключе, вы должны выполнить this.avatar.get('avatar')

. Кажется, что файл извлекается и успешно сохраняется в вашем примере, есть ли что-то, что не работает в частности?

Answer 2

возможно, вам следует изучить.

fileReader = new FileReader ();

fileReader.onload = function (evt) {

 ....

})