Angular POST有效负载上的base64映像为空-角度

我正在尝试将图像转换为

base64

后发送到后端，但在POST有效负载上，图像似乎为

null

user.photo = btoa(image);
console.log('user: ', user);    // user.photo is correct
this.userService.updateUser(user).subscribe(data => {   // user.photo is null
    this.currentUser = data;
}

---

我也尝试过使用较小的图像（0,8 kB），但问题仍然存在，因此我认为问题与图像的大小无关。有人能告诉我可能出了什么问题吗？谢谢

问题不在于图像的大小。UI端的base64转换需要一些改进，或者您正在调用的API格式不正确。请看下面验证API的代码

 public IHttpActionResult updateUser([FromBody] updateUserModel model)
    {
//model object should have a property of type byte[], for example :- 
// public byte[] File { get; set; }

var fileData = model.File;

}

在角度方面，对于绑定到Base64字节数组的属性，应该将数据类型用作“any”。我在这里分享我的工作代码：-

export class LogoImage {
Id: number;
File: any;
TempFile: any;
FileSize: number;
FileType: string;
FilePath: string;

} //更改时在浏览按钮上调用此函数

onFileChange(fileInput: any) {
    let fileName = fileInput.target.files[0].name;
    let fileSize = fileInput.target.files[0].size;
    var ext = fileName.split('.').pop().toUpperCase();

    var self = this;
    if (fileInput.target.files && fileInput.target.files[0]) {
        var reader: any = new FileReader();

        reader.onload = function (e) {


            self.file = e.target.result;

      // following code removes the base64 substring and gives only byte array.
         // it removes data:image/png;base64, from begining 
            this.LogoImage.File = self.file.substring(self.file.indexOf(',') + 1);

    //Initiate the JavaScript Image object.
            var image = new Image();

            //Set the Base64 string return from FileReader as source.
            image.src = e.target.result;

            //Validate the File Height and Width.
            image.onload = function (element) {
                let height = image.height;
                let width = image.width;
     // validation for height and width
                return true;
            };
        }
        reader.readAsDataURL(fileInput.target.files[0]);
    }
}

// html

 <div class="btn-fil-upload btn-file btn-info btn-sm">
                                                    <span class="fileinput-new">Select a file to upload</span>
                                                    <input #fileinputControl tabindex="5" class="fileinput" type="file" (change)="onFileChange($event)" name="..." />
                                                </div>

onFileChange（fileInput:any）{
让fileName=fileInput.target.files[0].name；
让fileSize=fileInput.target.files[0].size；
var ext=fileName.split（'.'）.pop（）.toUpperCase（）；
var self=这个；
if（fileInput.target.files&&fileInput.target.files[0]）{
var reader:any=new FileReader（）；
reader.onload=函数（e）{
self.file=e.target.result；
//下面的代码删除base64子字符串并仅给出字节数组。
//它从开始处删除数据：image/png；base64
this.LogoImage.File=self.File.substring（self.File.indexOf（'，）+1）；
//启动JavaScript图像对象。
var image=新图像（）；
//将FileReader返回的Base64字符串设置为源。
image.src=e.target.result；
//验证文件的高度和宽度。
image.onload=函数（元素）{
让高度=image.height；
让宽度=image.width；
//高度和宽度的验证
返回true；
};
}
reader.readAsDataURL（fileInput.target.files[0]）；
}
}
//html
选择要上载的文件

---

谢谢您的留言！但是base64转换结果应该是一个字符串，对吗？由于有效负载不包含

user.photo

值，我认为这与后端无关，因为图像从未发送。Hello@decebal，我已更新了我的答案，以便您能够更清楚地了解它。