сжать изображение при загрузке в угловой

Question

Я хотел загрузить изображения для продуктов и пользователей.Поэтому я конвертирую изображение в строку base64 и отправляю его.Но когда выбранное изображение большое, оно не загружается, поскольку строка base64 слишком велика.

Вот код:

Html

<input type="file" (change)="onFileSelected($event)">
<button  type="submit" title="upload" (click)="uploadImage()"></button>

TSФайл

onFileSelected(event){
var files = event.target.files;
var file = files[0];
if (files && file) {
var reader = new FileReader();
reader.onload =this._handleReaderLoaded.bind(this);
reader.readAsBinaryString(file);
}
}
_handleReaderLoaded(readerEvt) {
var binaryString = readerEvt.target.result;
this.base64textString= btoa(binaryString);
console.log(btoa(binaryString));
}

Я просто принимаю изображения на выбор.Итак, есть ли способ сжать изображение после выделения или способ уменьшить строку base64, чтобы изображение загружалось.Спасибо!!заранее.

Answer 1

В Angular вы можете загрузить изображение без конвертации в base64.Проверьте это ...

import { ViewChild }            from '@angular/core';

export class yourComponent { 

    @ViewChild('fileInput') fileInput;
    .
    .
    .
}

uploadImage(){
    let fileBrowser = this.fileInput.nativeElement;
    if (fileBrowser.files && fileBrowser.files[0]) {

        console.log(fileBrowser.files[0]);
        const formData = new FormData();
        formData.append("userId", this.userId );            //appending userId in formData
        formData.append("image", fileBrowser.files[0]);     //appending image in formData
        this.apiService.UploadImageMethod(formData)
        .subscribe(
            response=>{
                console.log(response);
                if(response.status == 'success'){
                    console.log(response);
                } 
            },
            err  => {
                this.imageErrorMsg = <any>err.message;
                console.log(this.imageErrorMsg);
            }
        );          
    }
}

HTML:
<input type="file" id="fileInput" (click)="hideErrorMsg()" accept="image/*" #fileInput>

В API вы можете получать данные изображения таким образом.(Php)

UploadImageMethod(){
    $fileName   = request()->image->getClientOriginalExtension();
    $ext        = strtolower(request()->image->getClientOriginalExtension());
}

Удачи !!!