无法在 Asp.net core 的控制器中获取图像详细信息答案

【问题标题】：Unable to get Image details in the controller of Asp.net core无法在 Asp.net core 的控制器中获取图像详细信息
【发布时间】：2022-07-13 16:14:04
【问题描述】：

我想将图像详细信息存储在数据库中，但无法在控制器中获取从 angular 发送的图像数据我可以使用控制器参数中的 [FromForm] 属性获取图像信息。但我希望它在模型中。提前致谢。

这是 Asp.net core 中的模型

public class FileModel
{
    public FileModel()
    {
        SpouseDetails = new SpouseDetailsData();
        ChildrensDetails = new List<ChildrensDetailsDataModel>();
    }
    public IFormFile? Photo { get; set; }
    //public byte[]? PhotoData { get; set; }
    public int UserDetailId { get; set; }
    public List<ChildrensDetailsDataModel>? ChildrensDetails { get; set; }
    public SpouseDetailsData SpouseDetails { get; set; }
    public class ChildrensDetailsDataModel
    {
        public string ChildCountry { get; set; } = null!;
        public string ChildCity { get; set; } = null!;
        public string ChildState { get; set; } = null!;
        public string ChildPhoneNumber { get; set; } = null!;
        public DateTime ChildDOB { get; set; }
        public string ChildLastName { get; set; }
        public string ChildEmailAddress { get; set; } = null!;
        public string ChildFirstName { get; set; } = null!;
    }
    public class SpouseDetailsData
    {
        public string SpouseEmail { get; set; } = null!;
        public string? SpouseCity { get; set; }
        public string? SpouseState { get; set; }
        public string? SpouseCountry { get; set; }
        public string SpouseHometown { get; set; } = null!;
        public string SpouseFirstName { get; set; } = null!;
        public string SpouseLastName { get; set; } = null!;
        public DateTime SpouseDob { get; set; }
    }
}

这是 Angular 代码

   composeModel(): void {
    this.updateUserModel.firstName = this.profileForm.value.firstName;
    this.updateUserModel.lastName = this.profileForm.value.lastName;
    this.updateUserModel.socialMedia = this.profileForm.value.firstName;
    this.updateUserModel.state = this.profileForm.value.state;
    this.updateUserModel.dob = this.profileForm.value.DOB;
    this.updateUserModel.city = this.profileForm.value.city;
    //Spouse Details
    this.updateUserModel.spouseDetails = this.spouseDetails;
    this.updateUserModel.photoData=this.selectedFile;
    this.updateUserModel.childrensDetails =  this.profileForm.value.childrensDetails;
  }

角度模型

    export class UserDetailModel {
    childrensDetails: ChildrensDetailsModel[]=[];
    spouseDetails!: SpouseDetails
    id:string="";
    photoData!:File;
    photo!:FormData
}

这是控制器

 [HttpPost]
    [Route("UpdateUser")]
    public async Task<JsonResult> UpdateUser([FromBody] FileModel userDetailModel)
    {
        var userslist = await _userBusiness.UpdateUser(userDetailModel);
        return new JsonResult(new { userslist });
    }

角度服务文件

  updateUser(userDetailModel:any):Observable<any> {
    return this.http.post<any>(`${UserProfileURLConstants.USER_PROFILE}`,userDetailModel);
}

【问题讨论】：

标签： angular typescript asp.net-core

【解决方案1】：

如您所述，要将带有其他附加数据的文件从 Angular 前端发布到 API 后端，我们可以使用 FormData 创建和填充数据，并通过指定 [FromForm] 属性使后端操作方法从发布的表单字段中获取值。

const formData = new FormData();
formData.append('Photo', selectedFile);
formData.append('SpouseDetails.SpouseEmail', 'test@example.com');
formData.append('SpouseDetails.SpouseCity', 'blabla..');
// console.log(formData);
this.http
  .post<any>('{url_here}', formData)
  .subscribe((data) => {
    //...

此外，如果您想在请求正文中发布带有数据的照片文件，您可以尝试使用FileReader.readAsDataURL() 获取base64编码的字符串，然后您可以将其转换为操作方法中的字节数组在后端。

【讨论】：

【解决方案2】：

我有一个类似的问题，但它正在发布它没有发布到我的后端输出总是为空

【讨论】：