使用多部分表单的Angular 6 post-request不包括所发布对象的附加文件

概述我正在尝试通过Angular 6将表单和文件一起发送到我的API,但是帖子不包含该文件,即使应该发送的对象也是如此. 当我查看控制台日志时,我看到了预期的内容,金额：“金额”,invoicefile：文件…. 但是在传出请求中,该字段显示invoicefile：{},现在文件在另一侧收到.一些图片包含在最后. 最后我的API告诉我所有字段都丢失了,但我认为另一个问题. 该组件如下所示： impor 我正在尝试通过Angular 6将表单和文件一起发送到我的API,但是帖子不包含该文件,即使应该发送的对象也是如此.

当我查看控制台日志时,我看到了预期的内容,金额：“金额”,invoicefile：文件….
但是在传出请求中,该字段显示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.minLength(4)]),debtor: new FormControl('',<any>ValIDators.minLength(10)]),dateout: new FormControl('',<any>ValIDators.minLength(8)]),expiration: new FormControl('',});  }  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;}

看起来正确的控制台日志：

以及丢失文件的传出请求：

编辑：

现在,create的服务代码如下所示：

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

响应看起来像这样.对我来说看起来很奇怪,而且我的后端仍然有一些错误,但这是另一个问题.

解决方法 您的POST请求正文实际上是JsON,而不是您希望的Multipart(尽管Content-Type标题所示).

为了解决这个问题,您需要构建一个FormData对象,并在您的请求中使用它：

let input = new FormData();// Add your values in hereinput.append('ID',invoice.ID);input.append('invoicefile',invoice.invoicefile);// etc,etcthis.http.post('/API/v1/invoices/',input,httpUploadOptions)

总结

以上是内存溢出为你收集整理的使用多部分表单的Angular 6 post-request不包括所发布对象的附加文件全部内容，希望文章能够帮你解决使用多部分表单的Angular 6 post-request不包括所发布对象的附加文件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。