Изображение base64 пусто для полезной нагрузки POST - угловое

Question

Я пытаюсь отправить изображение на сервер после того, как оно преобразовано в 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 кБ), и проблема сохраняется, поэтому я считаю, что проблема не связана с размером изображения. Может кто-нибудь пожалуйста посоветовать, что может быть не так? Спасибо!

Answer 1

Проблема не связана с размером изображения. Либо преобразование 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;

}

На угловой стороне вы должны использовать тип данных как «любой» для свойства, которое связано с массивом base64Byte. Я делюсь своим рабочим кодом здесь: -

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>