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中运行良好，但是当我想使用控制器时，出现错误：

标头：HttpHeaders {normalizedNames：Map（0），lazyUpdate：null，标头：Map（0）}   消息：“ https://localhost:5001/api/LinkItemToIcon的Http故障响应：415不支持的媒体类型”
  名称：“ HttpErrorResponse”
  好的：false
  状态：415
  statusText：“不受支持的媒体类型”
  网址：“ 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'
  })}
)

}

我的断点结果：

想想您的帮助。 breakpoint result

当我想订阅linkItemToIcon时出现错误消息

未定义FormData

此外，我可以在我的代码中将应用程序/ json的内容类型更改为multipart / form-data，因为我有

输入https://localhost:5001/api/Item/LinkItemToIcon/1 500（内部服务器错误）

CORS策略已阻止从来源“ https://localhost:5001/api/Item/LinkItemToIcon/1”访问“ http://localhost:4200”处的XMLHttpRequest：请求的资源上没有“ Access-Control-Allow-Origin”标头。

HttpErrorResponse {headers：HttpHeaders，status：0，statusText：“ Unknown Error”，url：null，ok：false，...}

Answer 1

请按照以下步骤操作演示：

Controller

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

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>

如果您在传递ID时遇到问题，可以通过Attribute Routing

传递

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

2 个答案: