如何修复Angular 6中文件上载时415不支持的媒体类型

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

它在Postman中运行良好，但当我想使用控制器时，我得到一个错误：

Headers:HttpHeaders{normalizedNames:Map（0），lazyUpdate:null，Headers:Map（0）}消息：“的Http失败响应https://localhost:5001/api/LinkItemToIcon:415不支持的媒体类型“
名称：“HttpErrorResponse”
确定：错误
状态：415
状态文本：“不支持的媒体类型”
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未定义

此外，我可以在代码中更改我的内容类型，即应用程序/json到多部分/表单数据，因为我有一个

放https://localhost:5001/api/Item/LinkItemToIcon/1500（内部服务器错误）

CORS策略阻止了从https://localhost:5001/api/Item/LinkItemToIcon/1http://localhost:4200对XMLHttpRequest的访问：请求的资源上不存在访问控制允许起源标头。

HttpErrorResponse

Answer 1

您必须通过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>

如果传递的id有问题，可以通过属性路由传递

Answer 2

按照以下步骤进行工作演示：

>

控制器

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

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