post image to asp.net API 2 und angle 2

Ich bekomme 415 (Nicht unterstützter Medientyp), wenn ich versuche, ein Bild in ASP.Net API 2 zu veröffentlichen. Der Medientyp "Multipart / Formulardaten" der Anforderungsentität wird für diese Ressource nicht unterstützt. "," exceptionMessage ":" Zum Lesen eines Objekts des Typs ist kein MediaTypeFormatter verfügbar. Anhang 'aus Inhalten mit Medientyp' mehrteilig / Formulardaten.

mein Backend Beitragsmethode:

    [HttpPost]
    [Route("api/listing/{listingId}/Attachment/")]
    public async Task<dynamic> Post([FromBody] Attachment model)
    {

        var Attachments = new Attachment
        {

            ListingId = model.ListingId,
            Content = model.Content,
            Description = model.Description,
            Name = model.Name,
            MimeType = model.MimeType,
            Size = model.Size,
            CreatedOn = DateTime.UtcNow,
            UpdatedOn = model.UpdatedOn,
        };

        return await DataStore.InsertDynamicAsync(Attachments);
    } 

undMeine Front-End-Methode:

  onChangeImage(e: any) {
      console.log(this.className + 'onChangeImage.event=' +JSON.stringify(event));
console.log(this.className + 'onChangeImage._listingAttachmentService undefined?: ' + (this._listingAttachmentService === undefined));
const inputElement = this.fileInput.nativeElement;

const fileList = inputElement.files;
const files = [];
console.log('AttachmentsTabComponent: file count = ' + fileList.length);

if (fileList.length > 0) {

  for (let i = 0; i < fileList.length; i++) {

    // get item
    const file = fileList.item(i);
    files.push(file);
    const model: Attachment = {
      listingId: this.listing.id,

      mimeType: file.type,
      name: file.name,
      size: file.size,
      updatedOn: file.lastModifiedDate
    };



    const reader = new FileReader();
    reader.readAsDataURL(file);

    console.log(this.className + 'onChangeImage.listingAttachmentService (before reader.onload) undefined?: ' + (this._listingAttachmentService === undefined));

    reader.onload = (readerEvt: any) => {
      const binaryString = readerEvt.target.result;

      //base-64 encoded ASCII string
      model.content = btoa(binaryString);

      console.log(this.className + 'onChangeImage.listingAttachmentService (during reader.onload) undefined?: ' + (this._listingAttachmentService === undefined));

      console.log(this.className + 'ListingAttachmentModel.content.length=' + JSON.stringify(model.content.length));
      // this._listingAttachmentService.add(model);
    };
  }

  // try to clear the file input
  try {
    // TODO: fix this
    this.fileForm.nativeElement.reset();
    inputElement.value = '';
    if (inputElement.value) {
      inputElement.type = 'text';
      inputElement.type = 'file';
    }
  } catch (e) { }

  this._listingAttachmentService.upload(this.listing.id, files)
    .subscribe(data => {
      this.listing.attachments = data;
    });
}
    }

und mein ListingAttachmentService

upload(listingId: number, files: Array<File>) {

this._logger.debug('method upload() entered');
this._logger.debug('upload() listingId=' + listingId);
this._logger.debug('this.fileToUpload.length=' + files.length);

var self = this;

return Observable.create(observer => {
  console.log('creating Observable');
  let formData: FormData = new FormData(),
    xhr: XMLHttpRequest = new XMLHttpRequest();

  formData.append('listingId', listingId);
  for (let i = 0; i < files.length; i++) {
    formData.append('uploads[]', files[i], files[i].name);
  }

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        observer.next(JSON.parse(xhr.response));
        observer.complete();
      } else {
        observer.error(xhr.response);
      }
    }
  };

  let newbaseUrl = self.baseUrl + listingId + '/attachment/' ;
  xhr.open('POST', newbaseUrl, true);
  xhr.send(formData);
})
  .catch(this.handleError);
}

Antworten auf die Frage(2)

Ihre Antwort auf die Frage