Question

尝试将图像列表作为C＃对象的属性上载时发生错误。

我正在尝试获取c＃对象中的图像路径作为ASP.Net Web API项目的HttpPost方法中的参数

我的C＃对象是

public class PostForCreateDto
{
    public string Title { get; set; } 
    public string Body { get; set; }        
    public string Category { get; set; }
    public List<IFormFile> Photos { get; set; }

}

HttpPost方法是

 public async Task<IActionResult> Create(PostForCreateDto postForCreateDto)
    {
       // do something from postForCreateDto
    }

在使用此方法之前，发生错误将值“ C：\ fakepath \ some_image.jpg”转换为“ System.Collections.Generic.List`1 [Microsoft.AspNetCore.Http.IFormFile]”时出错。路径“照片”

我尝试使用 [FomFrom]

public async Task<IActionResult> Create([FromForm]PostForCreateDto postForCreateDto)
    {
       // do something from postForCreateDto
    }

然后表单正在提交，没有任何错误，但是postForCreateDto中的所有字段都为空值。

正在发布的页面（从角度来看）

<form [formGroup]="postForm" method="POST" (ngSubmit)="createPost()" enctype="multipart/form-data">

<div class="form-group">
  <h4>Title</h4>
  <input class="form-control" placeholder="Title" formControlName="title">      

<div class="form-group">
  <h4>Body</h4>
  <textarea class="form-control" placeholder="Body" formControlName="body"> 
 </textarea>
 </div>
<div class="form-group">
  <h4>Category</h4>
  <input class="form-control" placeholder="Category" formControlName="category">      
</div>

<div class="form-group">     
  <h4>Photos</h4>
  <input type="file" multiple formControlName="photos">
</div>

<button typpe="submit" [disabled]="!postForm.valid" class="btn btn-success">Create</button>
<button class="btn btn-default" type="button">Cancel</button>

从角度方法内部 createPost（），我正在调用 Create（[FromForm] PostForCreateDto postForCreateDto）或（Create（PostForCreateDto postForCreateDto））方法

createPost方法

createPost() {
if (this.postForm.valid) {
  this.post = Object.assign({}, this.postForm.value);
  this.postService.createPost(this.post).subscribe(() => {
    this.alertify.success('post creation successful');
  }, (error: string) => {
    this.alertify.error(error);
  }, () =>  {
      this.router.navigate(['/']);
  });
}

}

我认为错误来自此行

this.post = Object.assign（{}，this.postForm.value）;

建议我使用postCreateD调用post方法以获取一些值的正确方法。

Answer 1

看看这个答案：Deserialize json object into dynamic object using Json.net 我想您也可以使用动态对象。

Answer 2

我找到了解决方案。想法来自Prashant Pimpale给出的使用formdata的评论

我如下更改了角度createPost（）（使用了formdata）

createPost() {
if (this.postForm.valid) {
  const formData = new FormData();
  formData.append('title', this.postForm.get('title').value);
  formData.append('body', this.postForm.get('body').value);      
  formData.append('categoryId', this.postForm.get('category').value);
  for (const photo of this.photos) {
    formData.append('photos', photo, photo.name);
  }      
  });
  this.postService.createPost(formData).subscribe(() => {
    this.alertify.success('post creation successful');
  }, (error: string) => {
    this.alertify.error(error);
  }, () =>  {
      this.router.navigate(['/']);
  });
}

}

对于照片输入，我添加了事件侦听器并向组件类添加了（photos：File [] = [];）照片

onFileSelect(event: any) {
if (event.target.files.length > 0) {
for (const file of event.target.files) {
  this.photos.push(file);
  }
 }
}

在我的postService中，我添加了如下内容标头

createPost(data: any) {
 const headers = new HttpHeaders().append(
'Content-Disposition', 'multipart/form-data');
 headers.append('Content-Type', 'application/json');
  return this.http.post(urlForCreatePost, data, {headers});
}

现在此数据已正确绑定到我的PostForCreateDto。

这可能是一个冗长的解决方案，不需要将Json发送到Web API Controller并在Controller类中反序列化Json对象。

如果有人可以用更少的代码做更好的解决方案，请建议我。更少的代码总是更好。

注意：我编写此解决方案是为了对其他遇到相同问题的人有所帮助。

将值“ C：\ fakepath \ some_image.jpg”转换为“ System.Collections.Generic.List`1 [Microsoft.AspNetCore.Http.IFormFile]”时出错。路径“照片”

2 个答案: