Данные формы не добавляют значения / изображение с помощью Angular 4

Question

Здравствуйте, друзья! Я создал проект на angular 4. Я хочу загрузить изображение и отправить запрос в файл PHP, но данные формы не могут добавлять значения и изображения. Помогите мне, пожалуйста Я включаю FormGroup, FormControl, FormBuilder, валидаторы, Http

const Image = this.com_Image.nativeElement;
if (Image.files && Image.files[0]) {
  this.comImageFile = Image.files[0];
}
const ImageFile: File = this.comImageFile;

// [enter image description here][1]
let formData = new FormData();
formData.append('companyName', value.companyName);
formData.append('username', value.username);
formData.append('uploadFile', ImageFile, ImageFile.name);

console.log(formData);

Answer 1

Html

<input #fileSelect type="file" class="form-control" (change)="onFileChanged($event)" accept=".jpg, .png"/>

компонент

export class FileUploadComponent {
  @ViewChild('fileSelect') fileSelectInput: ElementRef;

  fileToUpload: any;

  onFileChanged(event) {
    // https://stackoverflow.com/questions/13602039/e-srcelement-is-undefined-in-firefox
    this.fileToUpload = (event.srcElement || event.target).files; 
    let formData: FormData = new FormData();
    formData.append('file', this.fileToUpload[0]);
    this.createOrUpdateResource(formData);   
  }

  // https://stackoverflow.com/questions/48059121/angular4-file-upload-put-request-fails, 
  so making this POST
  private createOrUpdateResource(formData: FormData) {
    this.http.post<any>(`http://localhost:8080/upload`, formData).subscribe((res) => {
      //success
    }, error => {
      //error
    });
  }
}

Answer 2

Вы пытались передать только имя и значение для изображения?

Для управления файлами (в целом) это сработало для меня:

formData.append('uploadFile', ImageFile);