如何在一篇http帖子中发送FormData和一个对象?

时间:2019-05-15 16:20:47

标签: asp.net angular

因此,我正在尝试发布包含标题,描述和图像的帖子(例如,类似于Facebook上的帖子)。我使用Angular和ASP.NET CORE进行此操作。我的数据库结构是,我将图像保存在wwwroot服务器文件夹中,并希望创建一个表“ posts”,其中包含指向该文件夹的链接以获取图像。

创建帖子并发送图像都可以,但是现在我想在一个HttpPost中发送对象“ Post”和图像(FormData)。但是,它似乎不起作用。

英语

onSubmit(Image) {
    let post = new Post(this.post.value.titel, this.post.value.omschrijving, new Date(), this._userService.user$.getValue())
    this._postService.voegPostToe(post, this.selectedFile).subscribe();
    this.post.reset();
  }
  voegPostToe(post: Post, fileToUpload: File) {
    const formData: FormData = new FormData();
    formData.append('Image', fileToUpload, fileToUpload.name);
    return this.http.post(`${environment.apiUrl}/posts`, (post.toJson(), formData));
  }

ASP.NET

 [HttpPost]
        [Authorize(Roles = "Admin")]
        public async Task<IActionResult> PostPost(Post post)
        {

            var file = HttpContext.Request.Form.Files["Image"];
            string fileName = new String(Path.GetFileNameWithoutExtension(file.FileName).Take(10).ToArray()).Replace(" ", "-");
            fileName = fileName + DateTime.Now.ToString("yymmssfff") + Path.GetExtension(file.FileName);

            string filePath = _env.WebRootPath + "\\Images\\" + fileName;
            using (var fileSrteam = new FileStream(filePath, FileMode.Create))
            {
                await file.CopyToAsync(fileSrteam);
            }

            post.Fotolink = filePath;

            _postRepository.Add(post);
            _postRepository.SaveChanges();

            return NoContent();
        }

如果我仅尝试发送FormData,则会上传我的图像,并且如果我仅尝试发送我的post对象,它也将起作用。但是,这两者在一起会产生一个错误,即我未填写Posts的必填字段,这使我相信我的“ post object”没有发送出去。但是我似乎没发现我的错误。

编辑:如果需要,我可以提供其他代码。

1 个答案:

答案 0 :(得分:0)

您必须使用FormData发送所有数据,因此您的代码将像这样。您还必须对发布对象进行字符串化,因此只需提交FormData

<h3>Pages:  
<?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?>
            <?php next_posts_link( 'NEXT &raquo;', $loop->max_num_pages) ?>
 </h3>
</div>
<?php wp_reset_postdata(); ?>

然后在服务器中,您的操作应在此类参数中接受[FromForm]

let post = new Post(this.post.value.titel, this.post.value.omschrijving, new Date(), this._userService.user$.getValue())
const formData: FormData = new FormData();
formData.append('Image', fileToUpload, fileToUpload.name);
formData.append('ObjectData', JSON.stringify(post));
return this.http.post(`${environment.apiUrl}/posts`, formData);

然后您需要从我刚刚使用的ObjectData中解析json数据

public async Task<IActionResult> PostPost([FromForm]Post post)

请根据您的代码进行相应调整