ブロブイメージを読み取れません - イオン3 /角度4

Question

ダンプに問題があります。

示すように、私は私のMySQLデータベースにLONGBLOBとして手動で画像をアップロードする：

を今、私は私のテンプレートの私のハイブリッドイオン3 /アンギュラ4アプリケーションでその画像を表示しよう：

<img *ngIf="user.image" ng-src="data:image/png;base64,{{user.image}}" > 

私はChromeで私のネットワークトラフィックを調べるときに示すように、私は唯一の空の画像を参照してください。

を210

user.imageは、タイプBuffer as and Arrayからのものです。

なぜ私のBLOB-Imageが表示されませんか？

Answer 1

エンコードされたデータは、タイプ配列のバッファではありません。代わりに、バイナリデータはベース64形式にエンコードされます。

http://dataurl.net/#dataurlmaker

上記URLは、64形式を基にバイナリデータを変換するのに役立ちます。

MySQLデータベースに格納するときは、エンコードされたデータをそのまま格納する必要があります。

希望します。

Answer 2

素晴らしい！ありがとうKannaiyan、あなたは正しい、それは間違った形式であった。今私は、ファイル入力からDataURLを読み取ろう：活字体で

<input class="fileInput" style="display:none;" type="file" (change)="getBase64()"> 

：

getBase64() { 
let input = $(".fileInput").get(0); 
let b64; 
if (input.files && input.files[0]) { 

    var reader= new FileReader(); 
    reader.readAsDataURL(input.files[0]); 
    b64 = reader.result; 
} 
this.user.image = b64; 
} 

まず感謝を：私は私のimgタグに私の出力を貼り付けた場合には、画像を示しているが、好奇心旺盛なこともし私がconsole.log(reader.result)なら、それは正しいDataURLを出力しますが、私のuser.image変数でDataURLを取得しようとすると、何も定義されていないと言います...あなたはそれを説明できますか？イオニック/アンギュラのセキュリティ上の理由ですか？

Answer 3

私は最終的にそれを解決：

function getBase64(event) { 

    let input = $("#fileInput").get(0).files[0]; 

    if (input) { 

    var reader = new FileReader(); 
    reader.readAsBinaryString(input); 
    reader.onloadend = (e) => { 
     console.log(btoa(reader.result)); 
     $("#img").attr('src','data:' + input.type + ';base64,' + btoa(reader.result)); 
     $("#source").attr('value', 'data:' + input.type + ';base64,' + btoa(reader.result)); 
    }; 
    }; 
} 

私は角活字体/でBase64でDataURLを得ることができなかったので、私は私のindex.htmlに私のgetBase64（）関数を外部委託し、別の隠し入力とそれをトリガータグを使用してbase64文字をthis.user.image変数に渡します。

しかし、私は経由してポストしようと今：私のNodeJS Serverでエラー：http.post('/uploadUserProfileImage', this.user, {headers: headers}) {...}私は、「要求のエンティティが大きすぎるPayloadTooLargeError」を取得します。そして、はい、すでに許可されているbodyParser制限を50MBに増やしました。しかしそれは他の投稿のための別の質問です:)。

もう一度おねがいします！