FormData Append 方法在 Angular 中不起作用

Question

I have an Angular app where I want to implement upload of images to the server. I'm stuck on the moment where I must append chosen file to the newly created FormData. Here is my TypeScript component relevant part:

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)
}

This is what appears in console - FormData {} File {name: "background.jpg", lastModified: 1579183010623, lastModifiedDate: Thu Jan 16 2020 15:56:50 GMT+0200, webkitRelativePath: "", size: 8272, …}

So basically I don't understand why I can't append already existing this.imageData with value to this.avatar , when I try to append it, it's value doesn't change and i still have empty array = FormData {} . Any help would be appreciated.

Answer 1

maybe you should investigate.

fileReader = new FileReader ();

fileReader.onload = function(evt) {

 ....

})

Answer 2

Appending a value to 'avatar' in FormData, adds a value to the 'avatar' key. If you'd like to retrieve the values in a given key, you'd execute this.avatar.get('avatar')

It seems as though the file is retrieved and stored successfully in your example, is there anything that isn't working in particular?