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

我在一个.Net核心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);
    }
}

现在我的服务是：

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

LinkItemToIcon（id，文件）{
返回此.http.put（`${this.config.catchApiUrl（）}项/LinkItemToIcon/`+id，文件
,{
标题：新的HttpHeaders({
“内容类型”：“应用程序/json”
})}
)

}

我的断点结果：

谢谢你的帮助。

当我想订阅linkItemToIcon时，我收到一条错误消息

FormData未定义

---

此外，我可以在代码中将我的内容类型application/json更改为multipart/form数据，因为我有一个

PUT 500（内部服务器错误）

CORS策略已阻止从源“”访问“”处的XMLHttpRequest:请求的资源上不存在“访问控制允许源”标头

HttpErrorResponse{headers:HttpHeaders，状态：0，状态文本：“未知错误”，url:null，ok:false，…}

---

您必须通过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时遇到问题，您只需通过以下步骤传递即可进行演示：

控制器

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

---

怎么搞的？是同一个错误吗？它是什么类型的文件，大小是多少？好的，我刚刚注意到您已经在为您的操作使用属性路由，因此您实际上可以省略该隐藏字段，并将方法更改为method=“…/yourpath/LinkItemToIcon/yourid”。你试过了吗？什么是

linkItem

？您是否为

this.http

配置了任何http头？请尝试

F12

捕获请求并检查angular和postman之间的差异，与我们共享这两个请求。您好，对不起linkItem是LinkToItem，我编辑失败。我编辑我的帖子，向你展示我的标题，我也向你分享我的断点结果片段。此外，我可以在我的代码中将我的内容类型（即application/json）更改为multipart/form data，因为我有一个内部服务器错误我尝试了你的代码我也有同样的问题我用所有信息更新我的帖子

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

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

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