Как я могу исправить 415 неподдерживаемых типов носителей при загрузке файлов в Angular 6

Question

Я работаю над .Net Core Web Api и приложением Angular.Я создал контроллер, который связывает изображение с элементом в базе данных:

[HttpPut("[Action]/{id}")]
public async Task<ActionResult<Item>> LinkItemToIcon(int id, IFormFile file)
{
    var items = await _context.Items.FirstOrDefaultAsync(t => t.Id == id);

    if (items == null)
    {
        return BadRequest("item null");
    }

    if (file.Length <= 0)
    {
        return BadRequest("fileEmpty");
    }

    using (var memoryStream = new MemoryStream())
    {
        await file.CopyToAsync(memoryStream);
        Item item = new Item() { Id = items.Id, Icon = memoryStream.ToArray() };
        _context.Entry(items).CurrentValues.SetValues(item);
        _context.SaveChanges();

        return Ok(file);
    }
}

Он хорошо работает в Почтальоне, но когда я хочу использовать контроллер, я получаю ошибку:

Заголовки: HttpHeaders {normalizedNames: Map (0), lazyUpdate: null, headers: Map (0)} сообщение: «Отказ Http для https://localhost:5001/api/LinkItemToIcon: 415 неподдерживаемый тип носителя»
name: «HttpErrorResponse»
ok: false
status: 415
statusText: "Unsupported Media Type"
url: "https://localhost:5001/api/LinkItemToIcon"

Вы можете увидеть мой html в моемугловое приложение:

<input type="file" (change)="onSelectedFile($event) name="file">
<input type="button" (click)="linkItem()">

Вы можете увидеть мой компонент:

this.selectedFile : File = null ;
onSelectedFile(e){
    this.selectedFile = e.target.files[0]
}
LinkItem(){
    var formData = new FormData();
    formData.append("file",this.selectedFile, this.selectedFile.name)
    this.administrator.LinkItemToIcon(1,formData).subscribe(
       r => console.log(r),
       err => console.log(err)
    )
}

А теперь мой сервис:

  LinkItemToIcon(id,file){
return this.http.put<UploadFile>(`${this.config.catchApiUrl()}Item/LinkItemToIcon/`+ id, file
,{
  headers : new HttpHeaders({
    'Content-Type' : 'application/json'
  })}
)

}

Моя точка остановарезультат:

думаю, что вы за вашу помощь. результат останова

И у меня появляется сообщение об ошибке, когда я хочу подписаться на linkItemToIcon

FormData не определен

Более того, я могу изменить в своем коде мой тип контента, который является application / json, на multipart / form-daт. е. потому что у меня есть

PUT https://localhost:5001/api/Item/LinkItemToIcon/1 500 (внутренняя ошибка сервера)

Доступ к XMLHttpRequest по адресу https://localhost:5001/api/Item/LinkItemToIcon/1' от источника 'http://localhost:4200' заблокировано политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

HttpErrorResponse {заголовки: HttpHeaders, состояние: 0, statusText: «Неизвестная ошибка», url: null, ok: false,…}

Answer 1

Для демонстрации работы выполните следующие действия:

1. Controller

   [HttpPut("[Action]/{id}")]
   public async Task<ActionResult> LinkItemToIcon(int id, IFormFile file)
   {
       //your operation
   }
   

2. Angular

   selectedFile : File = null;
   onSelectedFile(e){
       this.selectedFile = e.target.files[0];
   }
   linkItem(){
       var formData = new FormData();
       formData.append("file", this.selectedFile, this.selectedFile.name)
       this.LinkItemToIcon(1, formData).subscribe(
       r => console.log(r),
       err => console.log(err)
       )
   }
   LinkItemToIcon(id, formData) {
       return this.http.put(`api/SampleData/LinkItemToIcon/` + id, formData);
   }
   

Answer 2

Вам нужно отправить его через javascript / Angular?Существует гораздо менее запутанный способ отправить его прямо из формы:

<form id="yourid" action=".../yourpath/LinkItemToIcon" method="PUT" enctype="multipart/form-data">
 <input type="file" name="file"/>
 <input type="hidden" name="id" value="yourID"/>
 <button type="submit">
  <span>Submit</span>
 </button>
</form>

И если у вас возникнут проблемы с передачей идентификатора, вы можете просто передать его через Маршрутизация атрибутов