将Angular 4中的文件和模型发送到ASP.NET Core后端

时间:2018-01-10 09:40:42

标签: asp.net angular asp.net-core multipartform-data angular-http

我一直试图制作一个包含文件输入(在本例中为图像)和文本输入的表单。文本输入是我要发送给服务器的模型的一部分。在后端,我使用的是ASP.NET Core 2.0。

这是我的后端代码:

[HttpPost]
public async Task<IActionResult> PostEditProfile([FromForm] EditProfileViewModel model, IFormFile profileImage, IFormFile bannerImage)
{
     //Some code
}

当我使用Postman调用此API时(我在表单数据中设置模型的属性和图像),一切正常。但是当我尝试使用Angular代码调用它时,所有参数都为null。这是我的Angular 4代码:

var formData = new FormData();
for (var propertyName in editProfile) {
    if (editProfile[propertyName]){
        formData.append(propertyName, editProfile[propertyName].toString());
    } 
}
formData.append('profileImage', profileImage);
formData.append('bannerImage', bannerImage);

return this.authHttp.post(this.baseUrl + 'api/Account/PostEditProfile', formData)
    .toPromise()
    .then(response => {
        var userInfo = response.json() as UserInfo;
        this.setUserInfo(userInfo);
        return userInfo.userName;
    })
    .catch(this.handleError);

当我使用Fiddler查看请求时,我注意到当我使用Angular 4发送请求时,Content-type标头未设置为multipart / form-data(当我使用Postman时)。我已尝试设置它,但它再次设置为application / json。

我在没有[FromForm]的情况下也尝试过,但也没有运气。我不知道下一步该做什么。

0 个答案:

没有答案