将具有IFormFile属性的模型从Angular2上载到ASP.NET核心WebApi
将具有IFormFile属性的模型从Angular2上载到ASP.NET核心WebApi
提问于 2017-08-28 21:13:03
我试图发送模型的一部分是一些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 side的公司模型
export interface Company {
id: string,
advertiseTitle: string,
advertiseDescription: string,
city: string,
street: string,
categoryId: number,
price: number,
facebookPage: string,
instagramPage: string,
avatarImage: File}
和我来自客户端的put方法
update(company: Company) {
return this.apiService.put(`${this.path}/${company.id}`, JSON.stringify(company));
}apiService中的Put方法
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核心)
// 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，在这种情况下不做任何改变。
回答 2
Stack Overflow用户
发布于 2018-07-18 02:28:00
基于this answer，我设法从Angular 5向asp.net核心Web API提交了一个表单，其中包括一个文件。
服务器上的型号：
[Required]
public string ExpenseType { get; set; }
[Required]
public string Activity { get; set; }
[Required]
public string Provider { get; set; }
[Required]
public decimal RequestedAmount { get; set; }
[Required]
public IFormFile InvoiceFile { get; set; }
public string Comment { get; set; }控制器操作：
[HttpPost]
public IActionResult PostPaybackRequest([FromForm] 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。
Stack Overflow用户
发布于 2017-08-29 01:38:19
您有两个选择：
- 将图像作为base64字符串传递，如下所示：Angular 2 encode image to base64。可以将base64字符串绑定到
byte[]属性server-side. - Use一个多部分表单请求，如下所述：File Upload In Angular 2?。表单部分可以在服务器端使用
IFormFile或List<IFormFile>操作参数进行绑定。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45919932
复制相关文章
相似问题
腾讯云开发者
