有没有办法将文件和表单组发布到我的 API？答案

【问题标题】：Is there a way to post a File and FormGroup to my API?有没有办法将文件和表单组发布到我的 API？
【发布时间】：2019-09-15 20:53:34
【问题描述】：

我实际上正在使用 .NET Core 开发一个 Angular 6 应用程序，在这个应用程序中我有一个用户窗体，用户可以在其中输入他的信息和一张图片。

不带图片的表单提交效果很好，不带表单的图片提交也可以。 但是现在我想进行全局提交，但是我收到了 400 错误：

“无法创建 Microsoft.AspNetCore.Http.IFormFile 类型的实例。类型是接口或抽象类，无法实例化”

我认为问题在于我的服务发布方法...

这是我的 userService 发布方法：

postUser(userFormAdd: FormGroup,file): Observable<Boolean> {
    let input = new FormData();
    input.append("file", file);
    let data = {          
        user: userFormAdd.value,
        fileData: input,
    };
    return this.http.post<Boolean>(AppSettings.URL + "/users/", data); 
}

我在 UserViewModel 中结合了用户模型和文件：

public class UserCreationViewModel
 {
     public User user { get; set; }
     public IFormFile fileData { get; set; }
 }

我的控制器 post 方法甚至没有被调用：

[HttpPost]
        public async Task<IActionResult> PostUser([FromBody]UserCreationViewModel userViewModel)
        {

          var test = await _siteService.CreateUser(userViewModel);

                return Ok();
        }

我希望通过 IFormFile 和我的控制器方法中的 Form 值来检索我的图片，但实际上我只有 400 错误

提前致谢

【问题讨论】：

您是否尝试将用户的每个属性发送到文件旁边，而不是发送用户对象？ Post => 用户名、密码、文件而不是 Post => 用户、文件数据？

标签： angular api .net-core

【解决方案1】：

试试下面的一个：

 let input = new FormData();
        input.append("file", file);
        input.append("user", userFormAdd.value);
        return this.http.post<Boolean>(AppSettings.URL + "/users/", input);

如果问题仍然存在，请拆分您的 UserFormAdd 项目并附加到 FormData()

【讨论】：

还是400错误，但是错误已经改成“输入无效”。我不认为我可以拆分项目，因为 UserFormAdd 是组中的嵌套：/
您需要分析后端接受输入的格式。您也可以使用 Postman 等工具进行检查。在您的请求格式与后端不匹配之前，您将获得 400 个。

【解决方案2】：

我得到了一些新的东西，我使用了 [FromForm]，我正在使用 FileData 进入我的 Controller 方法，但 User FormGroup 仍然是空的。

[HttpPost]
        public async Task<IActionResult> PostUser([FromForm]UserCreationViewModel userViewModel)
        {

          var test = await _siteService.CreateUser(userViewModel);

                return Ok();
        }

我的服务

postUser(userFormAdd: FormGroup,file) {
    let input = new FormData();
    input.append("file", file);
    input.append("user",userFormAdd.value);
    return this.http.post<Boolean>(AppSettings.URL + "/users/", data).subscribe(); 
}

我尝试对我的 FormGroup 值进行字符串化，但没有成功。

编辑 - 解决方案：

我在“输入”中传递了我的 FormGroup 的每个字段，所以我们有这样的事情：

postUser(userFormAdd: FormGroup,file) {
    let input = new FormData();
    input.append("file", file);
    input.append("name",userFormAdd.value.name);
    input.append("city",userFormAdd.value.city);
    input.append("address",userFormAdd.value.address);
    return this.http.post<Boolean>(AppSettings.URL + "/users/", data).subscribe(); 
}

不要忘记使用您添加的每个字段更新您的控制器视图模型

【讨论】：