Установите правильный тип контента для загрузки изображения в angular / node

Question

Я использую Angular 6 и узел 8 и пытаюсь создать механизм для загрузки изображений через форму.

Итак, это моя реактивная форма

<form [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted()" enctype="multipart/form-data" > 
  <input type="file" formControlName="imageInput" required #imageInput id="imageInput" name = 'image' (change)='imageChange($event)' accept=".png, .jpg, .jpeg, .gif" > 
  <input type="text" formControlName="imageName" required>
  <button type="submit" >Submit</button>  
</form>

Каждый раз, когда вы выбираетеизображение, сохраните этот файл изображения в переменной типа файла

      selectedFile:File=null;
      imageChange(e){        
        this.selectedFile = e.target.files[0];
      }

Затем отправьте данные формы в службу

  imageUploadSubmitted(){
    let input = this.imageUpload.controls.imageInput as any;        
    input.value = this.selectedFile;  
    this.myService.uploadImage(this.imageUpload.value).subscribe((data) =>{
      if(data.success){                  
        alert('all good');
      }
      else{
        alert('nope');
      }
    })
  }

Это служба

  uploadImage(data){
    let headers = new Headers();
    headers.append('Content-Type','multipart/form-data');
    headers.append('Authorization',this.user_token);
    return this.http.post('http://localhost:3000/cms/upload/image', data  ,{headers:headers}  ).pipe(map(res => res.json()));  
  }

Итак, у меня есть enctype="multipart/form-data" в части HTML, и я также добавляю 'Content-Type','multipart/form-data' в службу перед отправкой.

В узле, когда я console.log('FILES - ',req.body);, я не получаю файлов, он пуст.Я также получаю сообщение об ошибке Error: bad content-type header, no multipart boundary.

Я также попытался удалить HTML-часть enctype="multipart/form-data" или служебную часть 'Content-Type','multipart/form-data', на случай, если нужные типы будут установлены автоматически, но не повезло.

Есть предложения, как это исправить, чтобы я мог получить файлы в узле?

Спасибо

Answer 1

Тип контента добавляется автоматически, но вам нужно использовать FormData для вашего изображения.

let formData:FormData = new FormData();  
formData.append("imageInput", data);
this.http.post('http://localhost:3000/cms/upload/image', formData);

Это автоматически добавит правильный заголовок (с границей) для вас

Если у вас есть несколько полей формы, которые вы хотите добавить, вы можете сделать:

(ngSubmit)="imageUploadSubmitted($event.target)"

для передачи элемента формы и

imageUploadSubmitted(form){  
    let formData = new FormData(form);  

для создания экземпляра FormData с полямиа также