Angular 6 post-request с многочастной формой не включает прикрепленный файл объекта размещения - PullRequest
Новая
       23

Angular 6 post-request с многочастной формой не включает прикрепленный файл объекта размещения

0 голосов
/ 28 мая 2018

Я пытаюсь отправить форму вместе с файлом в мой API через Angular 6, но сообщение не включает файл, даже если объект, который должен быть отправлен, содержит.

КогдаЯ смотрю журналы консоли и вижу то, что ожидается, количество: «сумма», invoicefile: File .... Но в исходящем запросе поле показывает invoicefile: {}, и теперь файл получен на другой стороне.Некоторые картинки включены в конце.

Наконец, мой API сообщает, что все поля пропущены, но я думаю, что другая проблема.

Компонент выглядит следующим образом: 

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { FormGroup, FormBuilder, FormControl, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

import { AlertService } from '../_services';
import { InvoiceService } from '../_services';
import { Invoice } from '../_models';

@Component({
  selector: 'app-registerinvoice',
  templateUrl: './registerinvoice.component.html',
  styleUrls: ['./registerinvoice.component.css']
})
export class RegisterinvoiceComponent implements OnInit {
  public registerForm: FormGroup;
  public submitted: boolean;

  constructor(
    private router: Router,
    private invoiceService: InvoiceService,
    private alertService: AlertService,
    private http: HttpClient,

  ) { }
  fileToUpload: File = null;

  ngOnInit() {
    this.registerForm = new FormGroup({
      serial: new FormControl('', [<any>Validators.required, <any>Validators.minLength(5)]),
      amount: new FormControl('', [<any>Validators.required, <any>Validators.minLength(4)]),
      debtor: new FormControl('', [<any>Validators.required, <any>Validators.minLength(10)]),
      dateout: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)]),
      expiration: new FormControl('', [<any>Validators.required, <any>Validators.minLength(8)]),
    });
  }
  handleFileInput(files: FileList){
    this.fileToUpload=files.item(0);
  }

  deliverForm(invoice: Invoice, isValid) {
    this.submitted=true;
    if (!isValid){
      return;
    }
    invoice.invoicefile=this.fileToUpload;
    console.log(invoice);
    console.log(typeof(invoice.invoicefile));
    this.invoiceService.create(invoice)
      .pipe(first())
      .subscribe(
        data => {
          this.alertService.success('Invoice successfully uploaded', true);
          this.router.navigate(['/profile']);
        },
        error => {
          this.alertService.error(error);
        });
  }

}

Далее следует служба, предоставляющая сообщение: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Http } from '@angular/http';
import { Invoice } from '../_models';
import { FormGroup } from '@angular/forms';

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}
@Injectable({
  providedIn: 'root'
})
export class InvoiceService {

  constructor(
    private http: HttpClient
  ) { }
  create(invoice: Invoice){
    return this.http.post('/api/v1/invoices/', invoice, HttpUploadOptions)
  }
}

И, наконец, класс: 

export class Invoice {
    id: any;
    serial: any;
    amount: any;
    debtor: any;
    dateout: any;
    expiration: any;
    fid: any;
    invoicefile: File;
}

Журнал консоли, который выглядит правильно: enter image description here

И исходящий запрос, в котором отсутствует файл: enter image description here

РЕДАКТИРОВАТЬ:

Теперь сервисный код для создания выглядит следующим образом:

create(invoice: Invoice){
    let payload=new FormData();
    payload.append('amount', invoice.amount);
    payload.append('debtor', invoice.debtor);
    payload.append('serial', invoice.serial);
    payload.append('dateout', invoice.dateout);
    payload.append('expiration', invoice.expiration);
    payload.append('invoicefile', invoice.invoicefile);
    return this.http.post('/api/v1/invoices/', payload, HttpUploadOptions)
  }

И ответ выглядит так.Выглядит странно для меня, и я все еще получаю некоторые ошибки от моего бэкэнда, но это другой вопрос.enter image description here

Ответы [ 3 ]

0 голосов
/ 06 декабря 2018

Удалите multipart / form-data из заголовков, чтобы решить эту проблему 

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}

Решение 

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Accept": "application/json" })
}
0 голосов
/ 03 февраля 2019

Ранее у меня был этот, который выдавал ошибку 

const formData = new FormData();
formData.append(...);
this.http.post(apiUrl, {formData});

Я просто удалил объект из фигурных скобок, и он работал 

this.http.post(apiUrl, formData);
0 голосов
/ 28 мая 2018

Ваше тело POST-запроса на самом деле является JSON, а не Multipart, как вы надеетесь (несмотря на то, что говорит заголовок Content-Type).

Чтобы исправить это, вам нужно создать объект FormData и использоватьчто в вашем запросе вместо: 

let input = new FormData();
// Add your values in here
input.append('id', invoice.id);
input.append('invoiceFile', invoice.invoiceFile);
// etc, etc

this.http.post('/api/v1/invoices/', input, HttpUploadOptions)
...