使用IFormFile属性从Angular2上传模型到ASP.NET Core WebApi

Question

我正在尝试发送模型哪个部分是代表用户头像的一些IFormFile类型属性。但不幸的是我的头像属性总是空的，我看到了很多例子如何发送单个图像元素，但是我可以找到例如当它是模型的一部分时发送它而不是单个元素，因为它已完成here for example

这是我设置此道具的组件方法

  editUser(model: Company) {
this.errors = '';
debugger;
console.log(model);
let fi = this.fileInput.nativeElement;
if (fi.files) {
  let fileToUpload = fi.files[0];
  model.avatarImage = fileToUpload;
}
model.id = this.company.id;
this.companyService.update(model)
  .subscribe(
  result => {
    if (result) {
    }
  },
  errors => this.errors = errors);

}

这里我的公司模型在angular2侧

export interface Company {
id: string,
advertiseTitle: string,
advertiseDescription: string,
city: string,
street: string,
categoryId: number,
price: number,
facebookPage: string,
instagramPage: string,
avatarImage: File

}

我的客户端放置方法

    update(company: Company) {  
    return this.apiService.put(`${this.path}/${company.id}`, JSON.stringify(company));
}

将方法放在apiService

中

put(path: string, body): Observable<any> {
    debugger;
    this.setBearerHeader();
    console.log('Http Post Observable: ', path, body);
    let url = `${this.baseUrl}${path}`;
    let request = new Request({
        url: url,
        headers: this.headers,
        method: RequestMethod.Put,
        body: body
    });

    return this.http.request(request)
        .catch(this.handleError)
        .map(res => res.json())
};

我认为的第一个原因是JSON.stringify是一个原因，但是它并没有改变它在请求中总是空的任何东西

这是我的后端put方法（ASP.NET Core）

// PUT api/values/5
[HttpPut("{id}")]
public async Task<IActionResult> Put(string id, [FromBody] CompanyViewModel dto)
{
  if (!ModelState.IsValid)
  {
    return BadRequest(ModelState);
  }

  try
  {
    if (id != dto.Id)
    {
      return BadRequest();
    }

    //var entity = _mapper.Map<Company>(dto);
    //_shopDbContext.Comapnies.Update(entity);
    Company entity =  this.Get(id);
    entity.CategoryId = dto.CategoryId;
    entity.City = dto.City;
    entity.CategoryId = dto.CategoryId;
    entity.Street = dto.Street;
    entity.Price = dto.Price;
    entity.AdvertiseTitle = dto.AdvertiseTitle;
    entity.InstagramPage = dto.InstagramPage;
    entity.FacebookPage = dto.FacebookPage;
    using (var memoryStream = new MemoryStream())
    {
      await dto.AvatarImage.CopyToAsync(memoryStream);
      entity.AvatarImage = memoryStream.ToArray();
    }
    _shopDbContext.Comapnies.Update(entity);
    await _shopDbContext.SaveChangesAsync();

    return Ok(dto);
  }
  catch (Exception ex)
  {
    throw;
  }
}

此处还删除了[FromBody]在这种情况下不做任何改动。

Answer 1

您有两种选择：

• 将图像作为base64字符串传递，如下所述：Angular 2 encode image to base64。 base64字符串可以绑定到byte[]属性服务器端。
• 使用此处所述的多部分表单请求：File Upload In Angular 2?。表单部分可以在服务器端绑定IFormFile或List<IFormFile>操作参数。

Answer 2

基于this answer，我设法从Angular 5向asp.net核心Web API提交了一个包含文件的表单。

服务器上的模型：

public IActionResult PostPaybackRequest(WellnessPayback payback)
{ 
    if (!ModelState.IsValid) return BadRequest(ModelState);
    // TODO
    return Ok();
}

控制器动作：

export interface IWellnessPayback {
  expenseType: string;
  otherActivity: string;
  provider: string;
  requestedAmount: number;
  invoiceFile: File;
  comment: string;
}

角度模型：

public postPaybackRequest(payback: IWellnessPayback): Observable<boolean> {
  const formData = new FormData();
  for (const prop in payback) {
    if (!payback.hasOwnProperty(prop)) { continue; }
    formData.append(prop , payback[prop]);
  }
  return this._http.post<IOption[]>(`${this._baseUrl}/Me`, formData).pipe(map(x => true));
}

角度服务中的方法：

this._http

其中HttpClient是var theimage = document.getElementById('myimage'); theimage.height /= 2; 。