时间戳

首页 > 解决方案 > 使用 Angular 7 发送 .net 核心照片和 json

angular - 使用 Angular 7 发送 .net 核心照片和 json

问题描述

我正在使用 Angular 和 .net 内核，当我将照片发送到服务器端时，我看到照片是空白的。

我想同时发送json和文件数据，我需要bag

html文件中的表格

<form>
     <div class="form-group">
      <input
        class="form-control mr-sm-2"
        name="tournamentName"
        [(ngModel)]="addItems.achievement_tournament"
        required
        type="text"
        placeholder="Tournament Name"
      />
    </div>
    <div class="form-group">
      <input type="file" [(ngModel)]="addItems.File" />
    </div>
    <button
      class="btn btn-secondary my-2 my-sm-0"
      [disabled]="!editForm.valid"
      type="submit"
    >
      Save
    </button>
</form>

Angular 7 模型

   export class AchievementsAddEdit {
          achievement_tournament:string;
          File: File = null;
        }

Angular 7 组件 ts

 add(){
   this.achievementsService.add(this.addItems,this.selectedFile);
 }

成就服务 ts

add(item:AchievementsAddEdit,file){
    console.log(file);
    let formData: FormData = new FormData(); 
    formData.append('File',file );
        formData.append('achievement_tournament', item.achievement_tournament);
    const options = {
      headers: new HttpHeaders().set('enctype', 'multipart/form-data'),
     };
    this.httpClient.post(this.path + 'achievements/add',formData,options).subscribe(data=>{
        //console.log(data);
    });   }

.net 核心模型

  public class AchievementsAddEdit
{

    public System.DateTime achievement_date { get; set; }
    public string achievement_place { get; set; }

    public string achievement_tournament { get; set; }
    public string achievement_prize { get; set; }
    public int achievement_status { get; set; } = 1;

    public IFormFile File { get; set; }
}

.net 核心控制器

[HttpPost]
    [Route("add")]
    public async Task<IActionResult> Add([FromForm]AchievementsAddEdit model)
    {
        if (_appRepository.IsThereDataForAchievements(model.achievement_tournament))
        {
            return BadRequest("There Is");
        }

        _appRepository.Add(model);
        _appRepository.SaveAll();
        return Ok(model);

    }

查询结果

标签： angular.a

解决方案

您需要从更改标题

const options = {
      headers: new HttpHeaders().set('enctype', 'multipart/form-data'),
     };

至

const options = {
  headers: new HttpHeaders({ "Accept": "application/json" })
}

推荐阅读