bugfix> html > 投稿

製品とユーザーに画像をアップロードしたかった。画像を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文字列を減らして画像をアップロードする方法はありますか? ありがとう!!あらかじめ。

回答 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());
    }
    
    

    幸運を!!!

あなたの答え