如何在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中很好用，但是當我想使用控制器時，出現錯誤：

標頭：HttpHeaders {normalizedNames：Map（0），lazyUpdate：空，標頭：Map（0）}消息：“ HTTP對https：// localhost：5001 / api / LinkItemToIcon的失敗響應：415不支持的媒體類型”
名稱：“ HttpErrorResponse”
好的：錯誤
狀態：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'
  })}
)

}

我的斷點結果：

想得到您的幫助。 斷點結果

當我要訂閱linkItemToIcon時出現錯誤消息

未定義FormData

而且我可以在我的代碼中將我的內容類型更改為application / json到multipart / form-data，因為我有一個

PUT https：// localhost：5001 / api / Item / LinkItemToIcon / 1 500（內部服務器錯誤）

通過CORS策略已阻止從源“ http：// localhost：4200 ”訪問“ https：// localhost：5001 / api / Item / LinkItemToIcon / 1 ”處的XMLHttpRequest：沒有“ Access-Control-Allow-Origin”標頭存在於請求的資源上。

HttpErrorResponse {標頭：HttpHeaders，狀態：0，statusText：“未知錯誤”，網址：null，確定：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>

如果您無法傳遞ID，則可以通過屬性路由傳遞ID